/* ==========================================================================
   Custom Portfolio — front-end styles
   EDIT YOUR COLORS HERE (these five lines control everything):
   ========================================================================== */
.cpf{
  --cpf-bg:#222428;              /* page background */
  --cpf-card:#2a2c31;            /* card, slightly lighter than page */
  --cpf-card-hover:#303237;      /* card on hover */
  --cpf-accent:#eb1c5c;          /* pink accent */
  --cpf-heading:#ffffff;         /* headings */
  --cpf-text:#9b9ea4;            /* grey body text */

  --cpf-border:rgba(255,255,255,.07);
  --cpf-muted:#71747a;
  --cpf-radius:16px;
  --cpf-recess:#1b1d21;
  --cpf-barbg:#16171a;
  --cpf-cols:3;

  font-family:'Poppins',-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--cpf-text);
  line-height:1.6;
  max-width:1160px;
  margin:0 auto;
  padding:10px 0 40px;
}
.cpf *{box-sizing:border-box;}

/* ---- headers ---- */
.cpf-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--cpf-accent);margin-bottom:14px;}
.cpf-eyebrow::before{content:"";width:26px;height:2px;background:var(--cpf-accent);border-radius:2px;}
.cpf-title-lg{color:var(--cpf-heading);font-weight:800;font-size:clamp(28px,5vw,48px);line-height:1.1;letter-spacing:-.5px;margin:0;}
.cpf-sub{margin-top:14px;font-size:16px;max-width:560px;color:var(--cpf-text);}
.cpf-head{margin-bottom:42px;}

/* ---- grid + cards ---- */
.cpf-grid{display:grid;grid-template-columns:repeat(var(--cpf-cols),1fr);gap:26px;}
.cpf-card{background:var(--cpf-card);border:1px solid var(--cpf-border);border-radius:var(--cpf-radius);overflow:hidden;text-decoration:none;display:block;transition:transform .28s cubic-bezier(.2,.7,.2,1),background .28s,border-color .28s,box-shadow .28s;}
.cpf-card:hover{background:var(--cpf-card-hover);border-color:rgba(235,28,92,.55);transform:translateY(-7px);box-shadow:0 22px 46px rgba(0,0,0,.4);}
.cpf-thumb{position:relative;background:var(--cpf-recess);padding:14px;}
.cpf-thumb-link{display:block;text-decoration:none;}
.cpf-badge{position:absolute;top:14px;left:14px;z-index:3;background:var(--cpf-accent);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.4px;padding:5px 13px;border-radius:999px;box-shadow:0 4px 14px rgba(235,28,92,.4);}
.cpf-body{padding:22px 24px 26px;}
.cpf-card-title{color:var(--cpf-heading);font-size:20px;font-weight:700;line-height:1.3;margin:0;}
.cpf-card-title a{color:inherit;text-decoration:none;}
.cpf .cpf-card-title a:hover,
.cpf .cpf-card:hover .cpf-card-title a,
.cpf .cpf-card:hover .cpf-card-title{color:var(--cpf-accent);}
.cpf-card-desc{margin-top:8px;font-size:14px;color:var(--cpf-text);}
.cpf-link{margin-top:14px;display:inline-flex;align-items:center;gap:7px;color:var(--cpf-muted);font-size:13.5px;font-weight:600;transition:color .25s,gap .25s;}
.cpf-card:hover .cpf-link{color:var(--cpf-accent);gap:11px;}

/* ---- browser frame ---- */
.cpf-browser{border-radius:9px;overflow:hidden;border:1px solid rgba(255,255,255,.06);box-shadow:0 8px 20px rgba(0,0,0,.35);background:var(--cpf-barbg);}
.cpf-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--cpf-barbg);}
.cpf-bar i{width:9px;height:9px;border-radius:50%;background:#3a3d43;}
.cpf-bar i:first-child{background:var(--cpf-accent);}
.cpf-urlbar{margin-left:8px;height:15px;flex:1;border-radius:4px;background:rgba(255,255,255,.05);}
.cpf-thumb-img{aspect-ratio:16/11;background-size:cover;background-position:top center;background-color:#101114;display:flex;align-items:center;justify-content:center;}
.cpf-thumb-empty{color:var(--cpf-muted);font-size:12px;}

/* ---- CTA button ---- */
.cpf-cta{margin-top:18px;display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--cpf-accent);color:#fff;text-decoration:none;font-size:14px;font-weight:600;padding:12px 20px;border-radius:10px;width:100%;transition:transform .2s,box-shadow .2s,filter .2s;}
.cpf-cta:hover{filter:brightness(1.07);box-shadow:0 10px 24px rgba(235,28,92,.4);transform:translateY(-2px);color:#fff;}
.cpf-cta svg{width:15px;height:15px;}

/* ---- back button ---- */
.cpf-back{display:inline-flex;align-items:center;gap:9px;background:none;border:1px solid var(--cpf-border);color:var(--cpf-text);font-family:inherit;font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:999px;cursor:pointer;margin-bottom:26px;text-decoration:none;transition:border-color .25s,color .25s,gap .25s;}
.cpf-back:hover{border-color:var(--cpf-accent);color:var(--cpf-accent);gap:12px;}
.cpf-home{margin-bottom:22px;}

/* ---- tags ---- */
.cpf-tagrow{margin-top:12px;display:flex;flex-wrap:wrap;gap:7px;}
.cpf-tag{font-size:11px;font-weight:500;color:var(--cpf-text);background:rgba(255,255,255,.05);padding:4px 10px;border-radius:999px;}

/* ==========================================================================
   DETAIL PAGE
   ========================================================================== */
.cpf-detail{display:grid;grid-template-columns:1.55fr 1fr;gap:40px;align-items:start;}
.cpf-detail-visual .cpf-browser{box-shadow:0 26px 60px rgba(0,0,0,.5);}
.cpf-shot{max-height:72vh;overflow-y:auto;background:#fff;scrollbar-width:thin;scrollbar-color:var(--cpf-accent) transparent;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.cpf-shot img{width:100%;display:block;}
.cpf-shot::-webkit-scrollbar{width:8px;}
.cpf-shot::-webkit-scrollbar-thumb{background:var(--cpf-accent);border-radius:8px;}
.cpf-noimg{padding:60px 20px;text-align:center;color:#999;background:#f2f2f4;}
.cpf-hint{margin-top:12px;text-align:center;font-size:12px;color:var(--cpf-muted);letter-spacing:.3px;}
.cpf-detail-info{position:sticky;top:40px;}
.cpf-detail-info .cpf-title-lg{font-size:clamp(24px,3.5vw,36px);}
.cpf-desc{margin-top:16px;font-size:15px;color:var(--cpf-text);}
.cpf-desc p{margin:0 0 12px;}
.cpf-meta{margin-top:24px;border-top:1px solid var(--cpf-border);}
.cpf-mrow{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--cpf-border);font-size:14px;}
.cpf-mrow .k{color:var(--cpf-muted);}
.cpf-mrow .v{color:var(--cpf-heading);font-weight:500;text-align:right;}

.cpf-empty{color:var(--cpf-text);text-align:center;padding:50px 0;}

/* ---- all-in-one shortcode: view switching ---- */
.cpf-app .cpf-view{display:none;}
.cpf-app .cpf-view.active{display:block;animation:cpf-fade .4s ease both;}
@keyframes cpf-fade{from{opacity:0}to{opacity:1}}

/* ---- motion ---- */
.cpf-card{animation:cpf-rise .5s cubic-bezier(.2,.7,.2,1) both;}
@keyframes cpf-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* ---- responsive ---- */
/* tablets: 2 columns */
@media(max-width:960px){
	.cpf-grid{grid-template-columns:repeat(2,1fr);gap:20px;}
}
/* detail stacks */
@media(max-width:820px){
	.cpf-detail{grid-template-columns:1fr;gap:24px;}
	.cpf-detail-info{position:static;}
}
/* add side padding so content doesn't touch screen edges */
@media(max-width:768px){
	.cpf{padding-left:16px;padding-right:16px;}
}
/* phones: single column + tuned sizing */
@media(max-width:560px){
	.cpf-grid{grid-template-columns:1fr;gap:18px;}
	.cpf-head{margin-bottom:28px;}
	.cpf-title-lg{font-size:clamp(24px,7.5vw,34px);}
	.cpf-sub{font-size:15px;margin-top:12px;}
	.cpf-eyebrow{font-size:11.5px;letter-spacing:2px;margin-bottom:12px;}
	.cpf-thumb{padding:10px;}
	.cpf-body{padding:18px 18px 22px;}
	.cpf-card-title{font-size:18px;}
	.cpf-card-desc{font-size:13.5px;}
	.cpf-back,.cpf-home{margin-bottom:18px;padding:8px 14px;font-size:13px;}
	.cpf-detail-info .cpf-title-lg{font-size:clamp(22px,6.5vw,30px);}
	.cpf-desc{font-size:14.5px;}
	.cpf-shot{max-height:62vh;}
	.cpf-mrow{font-size:13.5px;padding:11px 0;}
	.cpf-cta{padding:13px 20px;}   /* comfortable tap target */
}
/* very small phones */
@media(max-width:380px){
	.cpf{padding-left:13px;padding-right:13px;}
	.cpf-body{padding:16px;}
}
@media(prefers-reduced-motion:reduce){.cpf *{animation:none!important;transition:none!important;}}