/* Rupikun Blog — responsive editorial header + warm paper aesthetic */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,550;9..144,700;9..144,800&family=Literata:opsz,wght@7..72,350;7..72,450;7..72,600&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  --paper:#f7f1e6;
  --ink:#17131f;
  --muted:rgba(23,19,31,.68);
  --rule:rgba(23,19,31,.14);
  --wine:#b83257;
  --teal:#0f766e;
  --shadow:0 18px 50px rgba(0,0,0,.10);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(920px 600px at 12% 0%, rgba(184,50,87,.12), transparent 56%),
    radial-gradient(880px 560px at 92% 8%, rgba(15,118,110,.10), transparent 58%),
    var(--paper);
  font-family:"Literata", ui-serif, Georgia, serif;
  line-height:1.82;
}

/* subtle grain */
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.07;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.wrap{
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px clamp(14px, 3vw, 18px) 64px;
  position:relative;
}

/* Header */
.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(247,241,230,.80);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.topbar .wrap{
  padding-top: 12px;
  padding-bottom: 12px;
}
.wrap--bar{
  padding-top: 12px;
  padding-bottom: 12px;
}

.brandRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
  color: inherit;
  min-width: 0;
}

.mark{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, rgba(184,50,87,.95), rgba(15,118,110,.86));
  color: #fff;
  font-family: "Fraunces", serif;
  font-weight: 800;
  letter-spacing: .4px;
  box-shadow: var(--shadow);
  flex: 0 0 auto;
}

.brandText{min-width:0; display:flex; flex-direction:column; line-height:1.06;}
.brandTitle{font-family:"Fraunces", serif; font-weight: 800; letter-spacing:-.25px; font-size: 16px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis;}
.brandSub{color:var(--muted); font-size: 12.5px; margin-top: 2px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; max-width: 44ch;}

.nav{display:flex; gap: 10px; align-items:center;}
.nav a{
  font-family:"Fraunces", serif;
  font-weight: 700;
  text-decoration:none;
  color: rgba(23,19,31,.78);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1;
}
.nav a:hover{border-color:var(--rule); background:rgba(23,19,31,.03); color:var(--ink);}
.nav a.is-active{border-color:rgba(184,50,87,.22); background:rgba(184,50,87,.06); color:var(--ink);}

/* Mobile menu (no JS) */
.mnav{display:none; position:relative;}
.mnav[open] .mnav__btn{border-color: rgba(184,50,87,.22); background: rgba(184,50,87,.06);}
.mnav__btn{
  list-style:none;
  cursor:pointer;
  user-select:none;
  width: 44px;
  height: 44px;
  display:grid;
  place-items:center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: rgba(255,255,255,.50);
}
.mnav__btn::-webkit-details-marker{display:none;}
.mnav__icon{
  width: 18px;
  height: 12px;
  position: relative;
  display:block;
}
.mnav__icon:before,
.mnav__icon:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height: 2px;
  border-radius: 999px;
  background: rgba(23,19,31,.78);
}
.mnav__icon:before{ top:0; }
.mnav__icon:after{ bottom:0; }
/* middle line via background */
.mnav__icon{
  background: linear-gradient(rgba(23,19,31,.78), rgba(23,19,31,.78)) center/100% 2px no-repeat;
}
.mnav__panel{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  min-width: 180px;
  background: rgba(255,255,255,.86);
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow: 0 22px 70px rgba(0,0,0,.12);
  overflow:hidden;
}
.mnav__panel a{
  display:block;
  padding: 12px 12px;
  text-decoration:none;
  color: rgba(23,19,31,.86);
  font-family:"Fraunces", serif;
  font-weight: 700;
  border-top: 1px solid rgba(23,19,31,.10);
}
.mnav__panel a:first-child{border-top:none;}
.mnav__panel a:hover{background: rgba(184,50,87,.06);}

/* Home hero */
.hero{padding: 18px 0 6px;}
.hero--compact{padding: 12px 0 4px;}
.hero h1{
  margin:0 0 10px;
  font-family:"Fraunces", serif;
  font-weight: 800;
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.06;
  letter-spacing:-.7px;
}
.hero p{margin:0; color: var(--muted); max-width: 78ch;}

.grid{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 16px;
  align-items:start;
  margin-top: 18px;
}

.card{
  background: rgba(255,255,255,.55);
  border: 1px solid var(--rule);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
  overflow:hidden;
}
.cardInner{padding: 16px;}
.cardHead{display:flex; align-items:baseline; justify-content:space-between; gap: 12px; flex-wrap:wrap; padding: 16px 16px 0;}
.cardTitle{margin:0; font-family:"Fraunces", serif; font-weight: 800; font-size: 18px; letter-spacing:-.2px;}
.small{font-size: 12.5px; color: var(--muted);}
.rule{height:1px; background: var(--rule); margin: 12px 0 0;}

.postList{list-style:none; margin:0; padding: 0;}
.postItem{padding: 16px; border-top: 1px solid var(--rule);} 
.postItem:first-child{border-top:none;}
.postTitle{
  display:inline-block;
  font-family:"Fraunces", serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing:-.25px;
  line-height: 1.18;
  color: var(--ink);
  text-decoration:none;
}
.postTitle:hover{color: var(--wine);}
.meta{margin-top: 6px; font-size: 12.8px; color: rgba(23,19,31,.62);} 
.desc{margin-top: 10px; color: rgba(23,19,31,.78); font-size: 15px;}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  color: rgba(23,19,31,.72);
  background: rgba(255,255,255,.45);
  font-size: 12.5px;
}
.dot{width:6px;height:6px;border-radius:99px;background: var(--wine); display:inline-block; opacity:.9;}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color: var(--ink);
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(23,19,31,.18);
  background: rgba(255,255,255,.55);
  font-family:"Fraunces", serif;
  font-weight: 700;
}
.btn:hover{border-color: rgba(184,50,87,.28); background: rgba(184,50,87,.06);}

.footer{
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 13px;
  text-align:center;
}
.footer a{color: inherit;}
.footer a:hover{color: var(--ink);}

/* Article */
.articleWrap{max-width: 780px;}
.articleHead{padding: 10px 0 0;}
.kicker{margin:0; color: rgba(23,19,31,.62); font-size: 12.5px; letter-spacing:.12em; text-transform: uppercase;}
.articleTitle{
  margin: 10px 0 10px;
  font-family:"Fraunces", serif;
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 40px);
  letter-spacing:-.8px;
  line-height: 1.05;
}

.prose{
  background: rgba(255,255,255,.58);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: clamp(14px, 3.2vw, 18px);
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
}
.prose h2{font-family:"Fraunces", serif; font-weight: 800; letter-spacing:-.2px; margin: 22px 0 10px; font-size: 18px;}
.prose p{margin: 0 0 14px; color: rgba(23,19,31,.86);} 
.prose ul{margin: 0 0 14px 18px;}
.prose li{margin: 6px 0;}
.prose code{font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; background: rgba(23,19,31,.06); padding: 1px 6px; border-radius: 8px;}

/* drop cap */
.prose p:first-of-type::first-letter{
  float:left;
  font-family:"Fraunces", serif;
  font-weight: 800;
  font-size: 3.15em;
  line-height: .92;
  padding-right: 8px;
  padding-top: 4px;
  color: var(--wine);
}

/* Responsive */
@media (max-width: 980px){
  .grid{grid-template-columns: 1fr;}
  .brandSub{max-width: 34ch;}
}

@media (max-width: 720px){
  .nav{display:none;}
  .mnav{display:block;}
  .topbar .wrap{padding-top:12px;padding-bottom:12px;}
  .mark{width:38px;height:38px;border-radius:13px;}
  .brandTitle{font-size:15px;}
}

@media (max-width: 420px){
  .brandSub{display:none;}
  .mnav__panel{min-width: 168px;}
}