*,::after,::before{box-sizing:border-box}ol[class],ul[class]{padding:0}blockquote,body,dd,dl,figcaption,figure,h1,h2,h3,h4,li,ol[class],p,ul[class]{margin:0}body{min-height:100vh;scroll-behavior:smooth;text-rendering:optimizeSpeed;line-height:1.5}ol[class],ul[class]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img{max-width:100%;display:block}article>*+*{margin-top:1em}button,input,select,textarea{font:inherit}@media (prefers-reduced-motion:reduce){*{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}}

:root {
    --white: #ffffff;
    --black: #04061C;
    --grey-dark: #6E6F7F;
    --grey-medium: #D1D3E6;
    --grey-light: #f7f8fd;
    --blue: #4659FF;
    --blue-dark: #6F91D0;
    --blue-medium: #B8D1FF;
    --blue-light: #EEF4FF;
    --red: #FF4646;
    --green: #3fc31e;
    --gold: #FB9F33;
    --purple: #8C46FF;
    --pink-light: #FFF7F8;  
    --pink-dark: #e6d6d7;
    --yellow-dark: #FFE09A;
    --yellow-light: #FFF8E8;
    --brown: #AF9351;

    --radius: 4px;
} 

/* -- Dark Mode -- */
@media (prefers-color-scheme: dark) {
    :root {
        --white: #04061C;
        --black: #ffffff;
        --grey-dark: #a9aaae;
        --grey-medium: #454551;
        --grey-light: #2c2d40;
        --blue: #F0D471;
    }
}

@view-transition {
    navigation: auto;
}

html { 
    background-color: var(--white); 
    color: var(--grey-dark);
    font-size: min(max(1rem, 4vw), 16px);
    font-size: -apple-system-body;
    font-family: 'Avenir Next', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
  	font-weight: 400;
    height: 100%; 
    min-height: 100%; 
    text-underline-offset: 2px;
    width: 100%; 
}

body { line-height: 1.8; margin: 0; padding: 0; }
.page { margin: 4rem auto; max-width: 44rem; padding: 2rem; }
img { border-radius: var(--radius); }

.playlist-logo { display: inline-block; margin: 0 1rem 0 0; transition: opacity 0.4s; }
.playlist-logo:hover { cursor: pointer; opacity:0.6; }

/* -- Links -- */
a { color: var(--blue); font-weight: 500; text-decoration: underline; transition: all 0.2s ease-in-out; }
a:hover { color: var(--black); text-decoration: none; }

.button, button, input[type=submit] { background-color: var(--blue); border: none !important; border-radius: var(--radius); color: var(--white) !important; cursor: pointer; display: inline-block !important; font-weight: 500; line-height: 0; margin: 0 0; outline: none; padding: 1.4rem 1.8rem !important; text-decoration: none; transition: all 0.2s ease-in-out; }
.button:hover, button:hover { background-color: var(--black); }

/* -- Typography -- */
h1, h2, h3, h4, h5, h6 { color: var(--black); font-weight: 500; line-height: 1.2; }
h1 { font-size: 2rem; margin: 0 0 2.4rem 0; }
h2 { font-size: 1.4rem; margin: 2.8rem 0 1.6rem 0; }
h3 { font-size: 1.2rem; margin: 2.8rem 0 1.6rem 0; }
h4, h5, h6 { font-size: 1rem; margin: 2.8rem 0 1.6rem 0; }

p { margin: 0 0 1.6rem 0; }
p:last-child { margin-bottom: 0; }
p.lede { color: var(--black); font-size: 1.4rem; font-weight: 500; line-height: 1.4; }
p.lede a { font-weight: 500; }

strong { color: var(--black); font-weight: 500; }

ul, ol { margin: 0 0 1.6rem 0; }
li { margin: 0 0 0.4rem 0; }
li::marker { color: var(--black); font-weight: 400; }
li ul { margin-top: 0.4rem; }

hr { border: 0; border-top: 1px solid var(--pink-light); display: block; height: 1px; margin: 1.6rem 0; }

blockquote { background-color: var(--grey-light); border: none; border-radius: var(--radius); color: var(--black); font-style: italic; margin: 0 0 1.6rem 0; padding: 2rem; }

code { color: var(--black); font-family: monospace; font-weight: 400; }
pre { background-color: var(--grey-light); border: none; border-radius: var(--radius); color: var(--black); display: block; font-size: 0.8rem; margin: 1.6rem 0; overflow: scroll; padding: 2rem; }
pre code { color: var(--black); }

table { border-collapse: separate; border-radius: var(--radius); border-spacing: 0; font-size: 0.8rem; line-height: 1.2; margin: 0 0 1.6rem 0; min-width: 100%; overflow: hidden; }
th { background-color: var(--grey-light); border-bottom: 1px solid var(--grey-medium); border-left: 1px solid var(--grey-medium); border-top: 1px solid var(--grey-medium); color: var(--black); font-weight: 500; padding: 0.8rem; text-align: left; }
td { border-bottom: 1px solid var(--grey-medium); border-left: 1px solid var(--grey-medium);  padding: 0.8rem; }
td:last-of-type { border-right: 1px solid var(--grey-medium); }
tr { border-bottom: 1px solid var(--grey-medium); }
th:first-of-type { border-top-left-radius: var(--radius); }
th:last-of-type { border-top-right-radius: var(--radius); border-right: 1px solid var(--grey-medium);  }
tr:last-of-type td:first-of-type { border-bottom-left-radius: var(--radius); }
tr:last-of-type td:last-of-type { border-bottom-right-radius: var(--radius); }

/* -- Header, Footer & Nav -- */
.site-header { margin: 0 0 4rem 0; }
.site-header span { color: var(--grey-dark); display: block; }
.site-title { color: var(--black); font-weight: 600; text-decoration: none; text-transform: uppercase; }
.main-nav { display: block; margin: 1rem 0 0 0; }
nav a { color: var(--black); text-decoration: none; }
nav a:hover { color: var(--blue); text-decoration: underline; }
nav a.current { color: var(--blue); }
nav a::after { color: var(--grey-medium); content: '\2022'; display: inline-block; margin: 0 0.4rem; }
nav a:last-child::after { content: none; }
nav a.active { color: var(--blue); }
.site-footer { font-size: 0.8rem; margin: 12rem 0; }
.sub-nav { margin: 0 0 1rem 0; }

/* -- Content -- */
article { margin: 0 0 4rem 0; }
.rss, .callout, .newsletter { background-color: var(--pink-light); border-radius: var(--radius); margin: 3.2rem 0; padding: 2rem; }
.callout { margin-top: 0; }
.rss h2, .callout h2, .callout h3, .newsletter h2 { margin-top: 0; }
.post-title { line-height: 1.4; margin: 0 0 0 0; font-weight: 500; }
.post-title a { font-weight: 500; }
.meta { color: var(--black); display: block; font-weight: 400; margin: 0 0 2rem 0; }
.blogroll { display: grid; grid-template-columns: 1fr 1fr; }
.page_number { display: block; font-size: 0.8rem; margin: 1rem 0 0 0; }
.permalink { border-top: 1px solid var(--pink-light); margin-top: 3.2rem; padding-top: 3.2rem; }
figure img { border-radius: var(--radius); }
figcaption { color: var(--grey-dark); font-size: 0.6rem; font-weight: 400; margin: 0 0 1.6rem 0; padding: 0.4rem; text-align: center; }

/* Link Posts */
.link .type { background-color: var(--blue-medium); border-radius: var(--radius) var(--radius) 0 0; color: var(--blue-dark); font-size: 0.8rem; font-weight: 500; line-height: 1; padding: 0.8rem 1.4rem; }
.link-content { background-color: var(--blue-light); border: 1px solid var(--blue-medium); border-top: none; border-radius: 0 0 var(--radius) var(--radius); font-size: 0.8rem; margin: 0; padding: 1.4rem; }
.link h2 { font-size: 0.8rem; margin: 0; }
.link .meta { margin: 0 0 0.8rem; }

/* Note Posts */
.note .type { background-color: var(--yellow-dark); border-radius: var(--radius) var(--radius) 0 0; color: var(--brown); font-size: 0.8rem; font-weight: 500; line-height: 1; padding: 0.8rem 1.4rem; }
.note-content { background-color: var(--yellow-light); border: 1px solid var(--yellow-dark); border-top: none; border-radius: 0 0 var(--radius) var(--radius); font-size: 0.8rem; margin: 0; padding: 1.4rem; }
.note h2 { font-size: 1rem; margin: 0; }
.note .meta { margin: 0 0 0.8rem; }
.link, .note { margin: 0 0 4rem 0; }

/* Newsletter */
.newsletter { background-color: var(--grey-light); border: 1px solid var(--grey-medium); border-radius: var(--radius); margin: 3.2rem 0; padding: 4rem; }
.newsletter label { color: var(--black); font-weight: 500; }
.newsletter input { border: 1px solid var(--grey-medium); border-radius: var(--radius); display: block; margin: 0 0 1rem 0; width: 100%; padding: 0.4rem 0.8rem; }
.newsletter input:focus { border: 1px solid var(--blue); outline: none; }
.past-issues ul { list-style-type: none; padding: 0; }
.past-issues li { margin: 0 0 1rem 0; }
.past-issues li a { background-color: var(--grey-light); border: 1px solid var(--grey-medium); border-radius: var(--radius); color: var(--black); display: block; font-weight: 400; padding: 1rem 2rem; text-decoration: none; transition: all 0.2s ease-in-out; }
.past-issues li a span { font-weight: 500;}
.past-issues li a:hover { background-color: var(--blue); border: 1px solid var(--blue); color: var(--white); }

/* Work */
.work-highlights { display: grid; grid-gap: 1rem; grid-template-columns: 1fr 1fr; margin: 2rem 0; }
.work-card { background-color: var(--grey-light); border: 1px solid var(--grey-medium); border-radius: var(--radius); padding: 1.4rem; }
.work-card div { margin-top: 1.4rem; }
.work-card img { border-radius: var(--radius); margin: 0; }
.work-card h3 { font-size: 1rem; margin: 0 0 1rem 0; }
.work-card p { font-size: 0.8rem; margin-bottom: 1rem; }
.work-card p:last-child { margin-bottom: 0; }

/* Progress */
.progress-month { }
.progress-day { display: inline-block; font-size: 0.6rem; margin: 0 10px 0 0; text-align: center; }
.progress-day .date { color: var(--black); font-weight: bold; }
.exercise { color: var(--red); }
.exercise.true { color: var(--green); }

.visually-hidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

@media screen and (max-width: 64rem) {
    .page { margin: 0 0 0 0; }
    nav { column-count: 2; }
    nav a { display: block; }
    nav a::after { content: none; }
    .blogroll { display: block; }
    .progress th, .progress .blank { display: none; }
    .progress td { display: block; }
    .work-highlights { display: block; }
    .work-card { margin-bottom: 2rem; }
    .newsletter { padding: 2rem; }
    p.lede { font-size: 1.2rem; line-height: 1.8; }
}