* {
    box-sizing:border-box
}
body{
    margin:0;
    font-family:system-ui,sans-serif;
    background:linear-gradient(180deg,#fffaf5,#f7efe7);
    color:var(--text)
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

figure {
    padding: unset;
    margin: unset;
    overflow: hidden;
}

nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1rem;
    position:relative
}

.cluster {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.caption {
    text-decoration: italic;
    font-size: 0.9rem;
    text-align: center;
}

.float-left {
    float: left;
    margin-right: 2em;
    margin-top: 1em;
    margin-bottom: 2em;
}
.float-right {
    float: right;
    margin-top: 1em;
    margin-left: 2em;
    margin-bottom: 2em;
}

.image.small {
    width: 240px;
}
.image.medium {
    width: 480px;
}

#menuBtn{
    background:none;
    border:none;
    font-size:1.6rem
}
#menu{
    display:none;
    list-style:none;
    padding:0;
    margin:0;
    flex-direction:column;
    gap:1rem;
    position:absolute;
    right:1rem;
    top:4rem;
    background:white;
    padding:1rem;
    border-radius:1rem;
    box-shadow:0 10px 30px rgba(0,0,0,.1)
}
#menu.open{
    display:flex
}

.logo{
    font-weight:700;
    color:var(--green);
    text-decoration:none
}
.logo img {
    width:32px;
    height: 32px;
}

.hero{
    min-height:100vh;
    background:radial-gradient(circle at top right,var(--mint),transparent 35%),radial-gradient(circle at bottom left,var(--peach),transparent 30%)
}

.hero-grid{
    padding:2rem 1rem;
    display:grid;
    gap:2rem;
    align-items:center
}
.tag{
    text-transform:uppercase;
    letter-spacing:.2rem;
    color:var(--gold);
    font-size:.8rem
}
.tag.green {
    color:var(--green);
}
h1{
    font-size:clamp(2.8rem,10vw,5rem);
    line-height:1
}
.cta{
    display:inline-block;
    background:var(--green);
    color:#fff;
    padding:1rem 1.5rem;
    border-radius:999px;
    text-decoration:none;
    margin-top:1rem
}

.yarn-ball{
    width:260px;
    height:260px;
    border-radius:50%;
    margin:auto;
    background:repeating-radial-gradient(circle,var(--gold),var(--gold) 6px,#e7b48a 6px,#e7b48a 14px);
    box-shadow:0 20px 50px rgba(0,0,0,.15)
}

.feature-cards,.grid3,.gallery{
    display:grid;
    gap:1rem;
    padding:1rem
}
.feature-cards article,.card,.post,.split,.gallery div{
    background:rgba(255,255,255,.8);
    backdrop-filter:blur(6px);
    padding:1.4rem;
    border-radius:1.4rem;
    box-shadow:0 8px 25px rgba(0,0,0,.08)
}
.feature-cards span{
    font-size:2rem
}
.split{
    margin:1rem
}
.mock-photo{
    min-height:220px;
    display:grid;
    place-items:center;
    border:2px dashed var(--green)
}
.footer{
    text-align:center;
    padding:3rem;
    color:#666
}
.page{
    padding:2rem 1rem;
    max-width:1200px;
    margin:auto
}
.narrow{
    max-width:700px
}

.journal-entry .heading {
}

.entry-kicker {
    font-weight: bold;
}
.entry-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid lightgrey;
    border-radius: 1rem;
}
.entry-hero > *:nth-child(2) {
    padding: 2rem;
}
.entry-hero .title {
    font-size: 4rem;
    margin: 1rem 0;
}
.entry-hero .image {
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
    width: 100%;

}
.entry-hero .image img {
    height: 100%;
    object-fit: cover;
}
.entry-meta {
    padding-top: 1rem;
    border-top: 1px solid lightgrey;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.author-card {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}
.author-card .card-title {
    font-weight: bold;
    font-size: 1.2em;
}
.author-card .image {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

@media(min-width:800px){
    #menuBtn{
        display:none
    }
    #menu{
        display:flex !important;
        position:static;
        background:none;
        box-shadow:none;
        flex-direction:row
    }
    .hero-grid,.split{
        grid-template-columns:1.2fr 1fr
    }
    .feature-cards,.grid3,.gallery{
        grid-template-columns:repeat(3,1fr)
    }

}