@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');

/* ----- reset ----- */

* { box-sizing: border-box; }
body, h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: normal; }
img { display: block; max-width: 100%; }
a { text-decoration: none; }

/* ----- colors ----- */

:root {
    --base: oklch(0.825 0.175 150);
    --blue: oklch(0.85 0.08 255);
    --blue: oklch(0.77 0.15 255);
    --blue-darker: oklch(0.45 0.08 255);
    --liteblue: oklch(0.5 0.05 255);

    --bg: oklch(0.13 0.02 150);
    --text: oklch(0.9 0.01 150);
}

.color-accent { color: oklch(0.8 0.15 150); }

body { color: var(--text); background: var(--bg);  }
.subtitle { color: #444; }

/* ----- layout ----- */

.two-cols { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }


/* ----- typography -----*/

body { line-height: 1.75; font-family: "Manrope", sans-serif; }
h1, h2, h3 { word-wrap: break-word; line-height: inherit; font-family: "Source Serif 4"; }
.subtitle { font-style: italic; }

/* ----- scrollable body ----- */
main { max-width: 1280px; margin: 0 auto; padding: 2rem; }

/* ----- header ----- */
header { padding: .5rem 1rem; background: rgba(0,0,0,0.1); }



/* ----- paragraphs ----- */
p + p { margin: 1rem 0; }

/* ----- links ----- */
a, a:visited { color: oklch(0.77 0.15 255); }

/* ----- hero ----- */
.hero {
    padding: 5rem 0;
    text-align: center;
    max-width: 960px;
    margin: 0 auto;
}
.hero .slogan {
    margin-bottom: 1rem;
}
.hero .tagline {
    margin-bottom: 1.5rem;
}
.cta {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
}
.article-cta {
    margin-top: 3rem;
}

/* ----- buttons ----- */
.button { 
    display: block;
    padding: .5rem 1rem;
    color: var(--blue);
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--blue);
}

.button-primary {
    background: var(--blue);
    color: var(--bg);
}

.button:hover {
    background: var(--blue);
    color: var(--text);
    border-radius: .5rem;
    background: var(--blue-darker);
    border-bottom: 1px solid var(--blue-darker);
}

/* ----- sections ----- */
section { margin-bottom: 4rem; }
.section-header { margin-bottom: 1rem; }
.subtitle { margin-bottom: 2rem; }
.section-intro-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(0,0,0, 0.01);
    border: 1px solid rgba(0,0,0,0.04);
    padding: 1rem;
    
}

.step { margin: 6rem 0; }

/* ----- footer ----- */
footer { text-align: center; }


.step { display: grid; gap: 1rem; grid-template-columns: 1fr; grid-template-areas: "counter" "title" "image" "content"; }
/* ----- media queries ----- */
@media (min-width: 720px) {
    .two-cols { grid-template-columns: 1fr 1fr;  }
    html { font-size: 1.25rem; }
    header { padding: 1rem 2rem; }

    .step { margin: 10rem 0; gap: 1rem 1.5rem; grid-template-columns: 1fr 1fr; grid-template-areas: "counter title" "image content"; }
    .step-counter { grid-area: counter; justify-self: end; }
    .step-title { grid-area: title; }
    .step-image { grid-area: image; }
    .step-content {grid-area: content; }
}

/* ---- scratchpad ----- */
#headshot { border-radius: 100%; }

/* ----- tasks ----- */
.tasks { max-width: 40rem; margin: 0 auto; display: flex; flex-direction: column; gap: .5rem;
    padding: .5rem;
    -border-left: 2px solid oklch(0.4 0.1 150);
    -border-right: 2px solid oklch(0.4 0.1 220);
    }
.task-client-header { color: oklch(0.7 0.15 150); padding: .25rem .5rem; border-left: 2px solid oklch(0.7 0.15 150);  }
.task-andrea-header { color: oklch(0.4 0.1 220); }
.task-client { align-self: flex-start; padding: .25rem .5rem;  max-width: 75%; border-left: 1px solid oklch(0.7 0.15 150); }
.task-andrea { align-self: flex-end; padding: .25rem .5rem; max-width: 75%; }