
/* Add your CSS code here.

For example:
.example {
    color: red;
}
/* ===================================================================
   findapeach — June 2026 Search Report
   PASTE THIS INTO:  Appearance ▸ Customize ▸ Additional CSS
   (Everything is scoped under .fap-article so it can't touch the theme.)
   Fonts are SELF-HOSTED (no render-blocking Google Fonts @import).
   woff2 live in /assets/fonts/report/ ; only fetched when .fap-article is on the page.
   =================================================================== */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('/wp-content/themes/twentytwentythree-child/assets/fonts/report/Archivo-500.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('/wp-content/themes/twentytwentythree-child/assets/fonts/report/Archivo-700.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url('/wp-content/themes/twentytwentythree-child/assets/fonts/report/Archivo-900.woff2') format('woff2');}
/* Inter 400: removed 2026-07-13 — @font-face is GLOBAL (can't be scoped); redeclaring family 'Inter' collided with the theme's Inter and double-downloaded 6 font binaries on every page. .fap-article now uses the theme's Inter files. */
/* Inter 500: removed 2026-07-13 — @font-face is GLOBAL (can't be scoped); redeclaring family 'Inter' collided with the theme's Inter and double-downloaded 6 font binaries on every page. .fap-article now uses the theme's Inter files. */
/* Inter 600: removed 2026-07-13 — @font-face is GLOBAL (can't be scoped); redeclaring family 'Inter' collided with the theme's Inter and double-downloaded 6 font binaries on every page. .fap-article now uses the theme's Inter files. */
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/wp-content/themes/twentytwentythree-child/assets/fonts/report/SpaceMono-400.woff2') format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/wp-content/themes/twentytwentythree-child/assets/fonts/report/SpaceMono-700.woff2') format('woff2');}

.fap-article{
  --ink:#25101f; --ink-2:#4a2436; --peach:#ff8a5c; --peach-deep:#ef5f2e;
  --blush:#fff4ef; --panel:#ffe7dc; --jade:#0f9b8e; --line:#f1d6ca; --mut:#7a5a52;
  max-width:780px; margin:0 auto; padding:0 0 8px;
  background:var(--blush); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:18px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
.fap-article *{box-sizing:border-box;}
.fap-article p{margin:0 0 1.15em;}
.fap-article a{color:var(--peach-deep);}
.fap-article strong{font-weight:600; color:var(--ink);}

/* hero */
.fap-article .fap-hero{
  background:var(--ink); color:#fff; border-radius:18px;
  padding:34px 32px 30px; position:relative; overflow:hidden;
}
.fap-article .fap-eyebrow{
  font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--peach); margin:0 0 14px;
}
.fap-article .fap-lede{
  font-family:'Archivo',sans-serif; font-weight:900;
  font-size:clamp(28px,5vw,42px); line-height:1.04; letter-spacing:-.02em;
  margin:0 0 .5em; max-width:15ch;
}
.fap-article .fap-lede em{font-style:normal; color:var(--peach);}
.fap-article .fap-dek{
  font-size:18px; line-height:1.55; color:#f3d9cf; max-width:48ch; margin:0;
}
.fap-article .fap-byline{
  font-family:'Space Mono',monospace; font-size:12.5px; color:var(--mut);
  margin:18px 2px 6px; letter-spacing:.02em;
}

/* body headings */
.fap-article h2{
  font-family:'Archivo',sans-serif; font-weight:800;
  font-size:clamp(23px,3.6vw,30px); line-height:1.1; letter-spacing:-.015em;
  margin:1.9em 0 .5em; color:var(--ink);
}
.fap-article h2 .fap-num{
  font-family:'Space Mono',monospace; font-weight:700; font-size:.55em;
  color:var(--peach-deep); margin-right:.6em; vertical-align:2px;
}
.fap-article .fap-body{padding:6px 2px 0;}

/* methodology strip */
.fap-article .fap-method{
  font-family:'Space Mono',monospace; font-size:13px; line-height:1.6;
  background:var(--panel); border-left:4px solid var(--peach);
  border-radius:0 10px 10px 0; padding:16px 18px; margin:6px 0 4px; color:var(--ink-2);
}

/* tables */
.fap-article .fap-tablewrap{overflow-x:auto; margin:.3em 0 1.4em;}
.fap-article .fap-tablewrap table{
  width:100%; border-collapse:collapse; font-size:15.5px;
  background:#fff; border-radius:12px; overflow:hidden;
}
.fap-article .fap-tablewrap thead th{
  background:var(--ink); color:#fff; text-align:left;
  font-family:'Space Mono',monospace; font-weight:700; font-size:12.5px;
  letter-spacing:.04em; text-transform:uppercase; padding:11px 14px;
}
.fap-article .fap-tablewrap th.num,.fap-article .fap-tablewrap td.num{
  text-align:right; font-variant-numeric:tabular-nums;
}
.fap-article .fap-tablewrap tbody td{
  padding:10px 14px; border-top:1px solid var(--line); color:var(--ink-2);
}
.fap-article .fap-tablewrap tbody tr:nth-child(odd) td{background:#fffaf7;}
.fap-article .fap-tablewrap tbody td:first-child{
  font-family:'Space Mono',monospace; color:var(--peach-deep); font-weight:700; width:44px;
}
.fap-article .fap-cap{
  font-family:'Space Mono',monospace; font-size:12px; color:var(--mut);
  margin:-.9em 2px 1.6em; letter-spacing:.01em;
}

/* figure card */
.fap-article .fap-fig{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:22px 22px 24px; margin:.4em 0 1.4em;
}
.fap-article .fap-fig h3{
  font-family:'Space Mono',monospace; font-size:12.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mut); margin:0 0 16px; font-weight:700;
}

/* signature search-bar chart */
.fap-article .fap-bar{
  display:flex; align-items:center; margin:0 0 9px;
  border:1.5px solid var(--line); border-radius:999px;
  position:relative; overflow:hidden; background:#fff7f3; height:42px;
}
.fap-article .fap-bar .fill{
  position:absolute; left:0; top:0; bottom:0;
  background:linear-gradient(90deg,var(--peach),var(--peach-deep));
  opacity:.92; border-radius:999px 0 0 999px;
}
.fap-article .fap-bar .ico{
  position:relative; z-index:2; width:42px; flex:0 0 42px; height:42px;
}
.fap-article .fap-bar .ico::before{   /* CSS magnifier — no SVG needed */
  content:""; position:absolute; left:14px; top:13px;
  width:11px; height:11px; border:2.4px solid #fff; border-radius:50%;
}
.fap-article .fap-bar .ico::after{
  content:""; position:absolute; left:24px; top:24px;
  width:7px; height:2.4px; background:#fff; transform:rotate(45deg); border-radius:2px;
}
.fap-article .fap-bar.lo .ico::before{border-color:var(--ink);}
.fap-article .fap-bar.lo .ico::after{background:var(--ink);}
.fap-article .fap-bar .label{
  position:relative; z-index:2; font-weight:600; color:#fff; flex:1;
  text-shadow:0 1px 2px rgba(60,15,5,.35); font-size:16px;
}
.fap-article .fap-bar.lo .label{color:var(--ink); text-shadow:none;}
.fap-article .fap-bar .val{
  position:relative; z-index:2; font-family:'Space Mono',monospace; font-weight:700;
  font-size:14px; padding-right:16px; color:#fff; text-shadow:0 1px 2px rgba(60,15,5,.35);
}
.fap-article .fap-bar.lo .val{color:var(--ink); text-shadow:none;}

/* fill widths (utility classes so no inline styles are required) */
.fap-article .w100{width:100%;}
.fap-article .w74{width:74%;}
.fap-article .w57{width:57%;}
.fap-article .w55{width:55%;}
.fap-article .w52{width:52%;}
.fap-article .w49{width:49%;}

/* country bars */
.fap-article .fap-cbar{margin:0 0 13px;}
.fap-article .fap-cbar .row{display:flex; justify-content:space-between; font-size:14.5px; margin:0 0 5px; font-weight:500;}
.fap-article .fap-cbar .row .pct{font-family:'Space Mono',monospace; color:var(--mut);}
.fap-article .fap-cbar .track{height:13px; background:var(--panel); border-radius:999px; overflow:hidden;}
.fap-article .fap-cbar .meter{height:100%; background:linear-gradient(90deg,var(--jade),#0c7d72); border-radius:999px;}
.fap-article .fap-cbar.us .meter{background:linear-gradient(90deg,var(--peach),var(--peach-deep));}
.fap-article .m100{width:100%;} .fap-article .m15{width:15.3%;} .fap-article .m10{width:10.1%;}
.fap-article .m6{width:6.2%;} .fap-article .m4{width:4.1%;} .fap-article .m2{width:1.6%;}

/* pull quote */
.fap-article .fap-pull{
  font-family:'Archivo',sans-serif; font-weight:700; font-size:clamp(20px,3.2vw,26px);
  line-height:1.28; color:var(--ink); border-top:3px solid var(--peach);
  border-bottom:3px solid var(--peach); padding:20px 4px; margin:1.6em 0; letter-spacing:-.01em;
}

/* footer */
.fap-article .fap-foot{
  font-family:'Space Mono',monospace; font-size:12px; color:var(--mut);
  border-top:1px solid var(--line); padding-top:14px; margin-top:26px; line-height:1.6;
}

@media (max-width:520px){
  .fap-article{font-size:16.5px;}
  .fap-article .fap-hero{padding:26px 20px 22px; border-radius:14px;}
  .fap-article .fap-fig{padding:16px 14px 18px;}
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

