/* AsianMeetsSpaghetti — malaymixwestern: batik warmth x modern western layout */
:root{
  --chili:#c8341f;        /* chili red */
  --chili-dark:#9c2513;
  --turmeric:#e0a422;     /* turmeric gold */
  --pandan:#3f7d54;       /* pandan green */
  --cream:#fdf8ef;
  --ink:#26201a;
  --ink2:#6d635a;
  --line:#eadfcc;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:Georgia,'Times New Roman',serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.75;
  font-size:17px;
}
h1,h2,h3,.brand,nav,.card-cat,.aff-btn,.crumb,.meta{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
}

/* batik dot border accent */
header.top{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 5vw;background:#fff;
  border-bottom:4px solid var(--chili);
  position:relative;
}
header.top::after{
  content:"";position:absolute;left:0;right:0;bottom:-10px;height:6px;
  background-image:radial-gradient(circle, var(--turmeric) 2px, transparent 2.5px);
  background-size:14px 6px;background-repeat:repeat-x;
}
.brand img{display:block}
nav a{
  color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;
  margin-left:22px;letter-spacing:.02em;
}
nav a:hover{color:var(--chili)}

main{max-width:760px;margin:0 auto;padding:34px 20px 60px}

/* hero */
.hero{text-align:center;padding:28px 0 8px}
.hero h1{font-size:clamp(28px,5vw,42px);font-weight:800;line-height:1.2;letter-spacing:-.01em}
.hl-red{color:var(--chili)}
.hl-gold{color:var(--turmeric)}
.hero p{margin-top:14px;color:var(--ink2);font-size:18px;max-width:560px;margin-left:auto;margin-right:auto}

/* index grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;margin-top:34px}
.card{
  display:block;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:22px;text-decoration:none;color:var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
  border-top:4px solid var(--turmeric);
}
.card:nth-child(3n+1){border-top-color:var(--chili)}
.card:nth-child(3n){border-top-color:var(--pandan)}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(38,32,26,.10)}
.card-emoji{font-size:30px;display:block;margin-bottom:8px}
.card-cat{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--chili)}
.card h3{font-size:19px;line-height:1.35;margin:6px 0 8px;font-weight:700}
.card p{font-size:14.5px;color:var(--ink2);line-height:1.55}

/* article */
article{background:#fff;border:1px solid var(--line);border-radius:16px;padding:38px 40px}
.crumb{font-size:13px;color:var(--ink2);margin-bottom:16px}
.crumb a{color:var(--chili);text-decoration:none}
.art-head{border-bottom:2px solid var(--line);padding-bottom:18px;margin-bottom:22px}
.hero-emoji{font-size:40px;display:block;margin-bottom:6px}
article h1{font-size:clamp(24px,4vw,34px);line-height:1.25;font-weight:800}
.meta{color:var(--ink2);font-size:13.5px;margin-top:8px}
.disclosure-inline{
  margin-top:12px;font-size:13px;color:var(--ink2);
  background:var(--cream);border-left:4px solid var(--turmeric);
  padding:8px 12px;border-radius:0 8px 8px 0;
}
article h2{font-size:23px;margin:34px 0 12px;font-weight:800;color:var(--chili-dark)}
article h3{font-size:18.5px;margin:26px 0 10px;font-weight:700}
article p{margin:14px 0}
article ul,article ol{margin:14px 0 14px 26px}
article li{margin-bottom:8px}
article blockquote{
  border-left:4px solid var(--pandan);background:#f4f8f2;
  padding:12px 18px;margin:18px 0;border-radius:0 10px 10px 0;font-style:italic;
}
article hr{border:none;border-top:2px dashed var(--line);margin:30px 0}
article a{color:var(--chili)}

/* affiliate elements */
.aff-btn{
  display:inline-block;background:var(--turmeric);color:#26201a;
  font-weight:800;font-size:15px;text-decoration:none;
  padding:12px 22px;border-radius:999px;margin:8px 0;
  box-shadow:0 3px 0 var(--chili-dark);
}
.aff-btn:hover{transform:translateY(-1px)}
.aff-pending{
  display:inline-block;background:#f3ece0;color:var(--ink2);
  font-size:14px;font-style:italic;
  padding:10px 18px;border-radius:999px;margin:8px 0;
  border:1.5px dashed var(--turmeric);
}
.art-foot{margin-top:34px;padding-top:18px;border-top:2px solid var(--line)}

/* footer */
footer{
  border-top:4px solid var(--chili);background:#fff;
  text-align:center;padding:26px 20px;font-size:13.5px;color:var(--ink2);
  position:relative;
}
footer::before{
  content:"";position:absolute;left:0;right:0;top:6px;height:6px;
  background-image:radial-gradient(circle, var(--turmeric) 2px, transparent 2.5px);
  background-size:14px 6px;background-repeat:repeat-x;
}
footer .disclosure{font-weight:600;color:var(--ink);margin-bottom:6px}
footer a{color:var(--chili)}

@media(max-width:600px){
  article{padding:26px 20px}
  header.top{flex-direction:column;gap:10px}
  nav a{margin:0 10px}
}