/*
Theme Name: Kylie
Theme URI: https://kylie.com
Author: Kylie
Description: A slow, vibe-forward personal blog and portfolio. Posts are filtered by World (category) and Thread (tag). Editorial, calm, made for the northern plains.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: kylie
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,300;1,9..144,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300&display=swap');

:root{
  --mist:#9aa890;
  --mist-deep:#6f7e66;
  --cream:#f4efe6;
  --cream-warm:#ece3d4;
  --bark:#3a3631;
  --bark-soft:#6a6258;
  --clay:#c08a6a;
  --bone:#fbf8f2;
  --line:#ddd5c6;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bone);
  color:var(--bark);
  font-family:'Cormorant Garamond',serif;
  -webkit-font-smoothing:antialiased;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit;}
.display{font-family:'Fraunces',serif;font-weight:300;}

/* masthead */
.site-header{padding:9vh 7vw 4vh;}
.site-name{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(2.6rem,7vw,5.2rem);letter-spacing:-0.02em;line-height:.95;color:var(--bark);text-decoration:none;display:inline-block;}
.site-name .dot{color:var(--clay);}
.site-tag{margin-top:1.4rem;font-style:italic;font-size:clamp(1.1rem,2vw,1.45rem);color:var(--mist-deep);}

/* filter bar */
.filters{padding:2vh 7vw 1vh;position:sticky;top:0;background:linear-gradient(var(--bone) 78%,transparent);z-index:40;}
.filtergroup{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-bottom:1rem;}
.grouplabel{font-family:'Fraunces',serif;font-style:italic;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bark-soft);opacity:.6;margin-right:.6rem;min-width:5.5rem;}
.bubble{
  font-family:'Cormorant Garamond',serif;font-size:1.05rem;
  padding:.32rem 1.05rem;border-radius:999px;cursor:pointer;text-decoration:none;
  border:1px solid var(--line);background:transparent;color:var(--bark-soft);
  transition:all .35s cubic-bezier(.2,.7,.3,1);white-space:nowrap;display:inline-block;
}
.bubble:hover{border-color:var(--mist);color:var(--bark);}
.bubble.brand.active{background:var(--clay);border-color:var(--clay);color:var(--bone);}
.bubble.theme.active{background:var(--mist-deep);border-color:var(--mist-deep);color:var(--bone);}
.bubble.allbtn.active{background:var(--bark);border-color:var(--bark);color:var(--bone);}

/* grid */
.site-main{padding:3vh 7vw 12vh;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2.2rem 2.4rem;align-items:start;}
.card{border-top:1px solid var(--line);padding-top:1.5rem;}
.card a.cardlink{text-decoration:none;color:inherit;display:block;}
.card .meta{display:flex;gap:.7rem;align-items:center;margin-bottom:.7rem;flex-wrap:wrap;}
.card .pill{font-family:'Fraunces',serif;font-style:italic;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;}
.card .pill.brand{color:var(--clay);}
.card .pill.theme{color:var(--mist-deep);}
.card .pill::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:.5rem;vertical-align:middle;}
.card .pill.brand::before{background:var(--clay);}
.card .pill.theme::before{background:var(--mist-deep);}
.card h2{font-family:'Fraunces',serif;font-weight:300;font-size:1.7rem;line-height:1.12;margin-bottom:.6rem;color:var(--bark);transition:color .3s;}
.card a.cardlink:hover h2{color:var(--clay);}
.card .excerpt{font-size:1.18rem;line-height:1.55;color:var(--bark-soft);}

.count{font-family:'Fraunces',serif;font-style:italic;font-size:.95rem;color:var(--bark-soft);opacity:.65;margin-bottom:2.2rem;}

/* single post */
.single-wrap{max-width:680px;margin:0 auto;padding:6vh 7vw 12vh;}
.single-wrap .meta{display:flex;gap:.7rem;margin-bottom:1.4rem;flex-wrap:wrap;}
.single-wrap h1{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(2rem,5vw,3.4rem);line-height:1.1;margin-bottom:2rem;color:var(--bark);}
.single-content{font-size:1.32rem;line-height:1.75;color:var(--bark-soft);}
.single-content p{margin-bottom:1.4rem;}
.single-content h2,.single-content h3{font-family:'Fraunces',serif;font-weight:300;color:var(--bark);margin:2.2rem 0 1rem;}
.single-content a{color:var(--clay);}
.backlink{display:inline-block;margin-bottom:3rem;font-family:'Fraunces',serif;font-style:italic;color:var(--mist-deep);text-decoration:none;}

/* footer */
.site-footer{padding:6vh 7vw;border-top:1px solid var(--line);text-align:center;}
.site-footer a.mail{font-family:'Fraunces',serif;font-style:italic;font-size:1.25rem;color:var(--clay);text-decoration:none;border-bottom:1px solid var(--clay);}
.site-footer .sig{margin-top:1.5rem;font-family:'Fraunces',serif;letter-spacing:.3em;text-transform:uppercase;font-size:.75rem;color:var(--mist-deep);}

.pagination{margin-top:4rem;display:flex;gap:1.4rem;justify-content:center;font-family:'Fraunces',serif;font-style:italic;}
.pagination a,.pagination span{color:var(--mist-deep);text-decoration:none;}
.pagination .current{color:var(--clay);}