html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
 font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
    vertical-align: baseline
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

body {
    line-height: 1
}

ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

html {
    text-rendering: optimizeLegibility
}

.margin-top-small {
    margin-top: .5rem !important
}

.padding-bottom-0 {
    padding-bottom: 0 !important
}

.relative {
    position: relative
}

.overflow-hidden {
    overflow: hidden
}

.bold {
    font-variation-settings: "wght" 580
}

.capitalize {
    text-transform: capitalize
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

.inline-block {
    display: inline-block
}

.center {
    text-align: center
}

.inline-block {
    display: inline-block
}

.text-wrap-balance {
    text-wrap: balance
}

.text-wrap-pretty {
    text-wrap: pretty
}

.center-text {
    text-align: center
}

@media screen and (min-width: 40rem) {
    .u-show-small {
        display: none
    }
}

@media screen and (max-width: 40rem) {
    .u-show-medium {
        display: none
    }
}

.wrapper-full {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto
}

@media screen and (min-width: 25rem) {
    .wrapper-full {
        padding-left: 1.25rem;
        padding-right: 1.25rem
    }
}

@media screen and (min-width: 30rem) {
    .wrapper-full {
        padding-left: 2rem;
        padding-right: 2rem
    }
}

@media screen and (min-width: 40rem) {
    .wrapper-full {
        padding-left: 3.25rem;
        padding-right: 3.25rem
    }
}

@media screen and (min-width: 68.75rem) {
    .wrapper-full {
        padding-left: 3.75rem;
        padding-right: 3.75rem
    }
}

@media screen and (min-width: 68.75rem) {
    .wrapper-full {
        max-width: 77.5rem
    }
}

.wrapper-wide {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 52.5rem
}

@media screen and (min-width: 25rem) {
    .wrapper-wide {
        padding-left: 1.25rem;
        padding-right: 1.25rem
    }
}

@media screen and (min-width: 30rem) {
    .wrapper-wide {
        padding-left: 2rem;
        padding-right: 2rem
    }
}

@media screen and (min-width: 40rem) {
    .wrapper-wide {
        padding-left: 3.25rem;
        padding-right: 3.25rem
    }
}

@media screen and (min-width: 68.75rem) {
    .wrapper-wide {
        padding-left: 3.75rem;
        padding-right: 3.75rem
    }
}

.wrapper-regular {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 40rem
}

@media screen and (min-width: 25rem) {
    .wrapper-regular {
        padding-left: 1.25rem;
        padding-right: 1.25rem
    }
}

@media screen and (min-width: 30rem) {
    .wrapper-regular {
        padding-left: 2rem;
        padding-right: 2rem
    }
}

@media screen and (min-width: 40rem) {
    .wrapper-regular {
        padding-left: 4.375rem;
        padding-right: 4.375rem
    }
}

@media screen and (min-width: 68.75rem) {
    .wrapper-regular {
        padding-left: 3.75rem;
        padding-right: 3.75rem
    }
}

.py-m {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem
}

@media screen and (min-width: 40rem) {
    .py-m {
        padding-top: 4rem
    }
}

@media screen and (min-width: 68.75rem) {
    .py-m {
        padding-top: 5.625rem
    }
}

@media screen and (min-width: 40rem) {
    .py-m {
        padding-bottom: 4rem
    }
}

@media screen and (min-width: 68.75rem) {
    .py-m {
        padding-bottom: 5.625rem
    }
}

.pt-m {
    padding-top: 2.5rem
}

@media screen and (min-width: 40rem) {
    .pt-m {
        padding-top: 4rem
    }
}

@media screen and (min-width: 68.75rem) {
    .pt-m {
        padding-top: 5.625rem
    }
}

.pb-m {
    padding-bottom: 2.5rem
}

@media screen and (min-width: 40rem) {
    .pb-m {
        padding-bottom: 4rem
    }
}

@media screen and (min-width: 68.75rem) {
    .pb-m {
        padding-bottom: 5.625rem
    }
}

.py-s {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem
}

@media screen and (min-width: 40rem) {
    .py-s {
        padding-top: 2.5rem
    }
}

@media screen and (min-width: 68.75rem) {
    .py-s {
        padding-top: 4rem
    }
}

@media screen and (min-width: 40rem) {
    .py-s {
        padding-bottom: 2.5rem
    }
}

@media screen and (min-width: 68.75rem) {
    .py-s {
        padding-bottom: 4rem
    }
}

.pt-s {
    padding-top: 1.75rem
}

@media screen and (min-width: 40rem) {
    .pt-s {
        padding-top: 2.5rem
    }
}

@media screen and (min-width: 68.75rem) {
    .pt-s {
        padding-top: 4rem
    }
}

.pb-s {
    padding-bottom: 1.75rem
}

@media screen and (min-width: 40rem) {
    .pb-s {
        padding-bottom: 2.5rem
    }
}

@media screen and (min-width: 68.75rem) {
    .pb-s {
        padding-bottom: 4rem
    }
}

.detail h1 {
    font-family: "btg-sans", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.6875rem;
    line-height: 2rem;
    letter-spacing: -0.018em;
    text-wrap: pretty;
    font-variation-settings: "wght" 580;
    margin-bottom: 1.25rem
}

@media screen and (min-width: 40rem) {
    .detail h1 {
        font-size: 2.125rem;
        line-height: 2.625rem
    }
}

@media screen and (min-width: 40rem) {
    .detail h1 {
        margin-bottom: 2rem
    }
}

.detail .date {
    margin-top: -0.5rem;
    margin-bottom: 2.5rem;
    color: rgba(0, 0, 0, .6)
}

@media screen and (min-width: 40rem) {
    .detail .date {
        margin-top: -1.25rem;
        margin-bottom: 2.5rem
    }
}

.detail h2 {
    font-family: "btg-sans", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.4375rem;
    line-height: 1.875rem;
    letter-spacing: -0.018em;
    text-wrap: pretty;
    font-variation-settings: "wght" 580;
    margin-bottom: 1.25rem
}

@media screen and (min-width: 40rem) {
    .detail h2 {
        font-size: 1.6875rem;
        line-height: 2.25rem
    }
}

@media screen and (min-width: 40rem) {
    .detail h2 {
        margin-bottom: 1.25rem
    }
}

.detail h3 {
    font-family: "btg-sans", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.25rem;
    line-height: 1.625rem;
    letter-spacing: -0.018em;
    text-wrap: pretty;
    font-variation-settings: "wght" 580;
    margin-bottom: 1.25rem
}

@media screen and (min-width: 40rem) {
    .detail h3 {
        font-size: 1.375rem;
        line-height: 1.8125rem
    }
}

@media screen and (min-width: 40rem) {
    .detail h3 {
        margin-bottom: 1.25rem
    }
}

.detail ul,
.detail ol {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    clear: both
}

@media screen and (min-width: 40rem) {
    .detail ul,
    .detail ol {
        margin-bottom: 1.5rem
    }
}

.detail li {
    list-style-type: none;
    padding-left: 1rem;
    text-indent: 0;
    position: relative;
    margin-bottom: .75rem
}

@media screen and (min-width: 40rem) {
    .detail li {
        padding-left: 1.5rem;
        margin-bottom: .75rem
    }
}

.detail ul>li:before {
    display: inline-block;
    content: "•";
    position: absolute;
    font-size: 1.4em;
    left: -0.1875rem;
    top: .0625rem;
    margin: 0
}

@media screen and (min-width: 40rem) {
    .detail ul>li:before {
        font-size: 1.4em;
        left: -0.0625rem;
        top: 0
    }
}

.detail ol>li {
    list-style-type: decimal;
    margin-left: 1.5rem;
    padding-left: 0
}

.detail ul>li>ul {
    margin-bottom: 0
}

.detail img {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem
}

@media screen and (min-width: 40rem) {
    .detail img {
        margin-top: 1.25rem;
        margin-bottom: 1.25rem
    }
}

.detail p+h2,
.detail ul+h2,
.detail ol+h2,
.detail pre+h2,
.detail table+h2,
.detail iframe+h2,
.detail img+h2,
.detail blockquote+h2 {
    margin-top: 2.5rem
}

@media screen and (min-width: 40rem) {
    .detail p+h2,
    .detail ul+h2,
    .detail ol+h2,
    .detail pre+h2,
    .detail table+h2,
    .detail iframe+h2,
    .detail img+h2,
    .detail blockquote+h2 {
        margin-top: 2.5rem
    }
}

.detail p+h3,
.detail h2+h3,
.detail ul+h3,
.detail ol+h3,
.detail pre+h3,
.detail table+h3,
.detail iframe+h3,
.detail img+h3,
.detail blockquote+h3 {
    margin-top: 2.5rem
}

@media screen and (min-width: 40rem) {
    .detail p+h3,
    .detail h2+h3,
    .detail ul+h3,
    .detail ol+h3,
    .detail pre+h3,
    .detail table+h3,
    .detail iframe+h3,
    .detail img+h3,
    .detail blockquote+h3 {
        margin-top: 2.5rem
    }
}

.detail figure {
    margin: 1.75rem 0
}

@media screen and (min-width: 40rem) {
    .detail figure {
        margin: 2rem 0
    }
}

.detail figure img {
    margin-bottom: .625rem
}

.detail figcaption {
    font-family: "btg-sans", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: .9375rem;
    line-height: 1.25rem
}

@media screen and (min-width: 40rem) {
    .detail figcaption {
        font-size: 1rem;
        line-height: 1.5rem
    }
}

.detail hr {
    border: none;
    text-align: center;
    margin: 2rem 0 2rem 0;
    color: #111
}

.detail hr::after {
    content: "***";
    letter-spacing: .3125rem;
    display: block;
    padding-top: .4375rem
}

.listing {
    margin-bottom: 1.25rem;
    margin-top: -0.75rem
}

.listing a {
    transition: color .2s ease-in-out, background-color .2s ease-in-out, background-image .2s ease-in-out, background-position .2s ease-in-out, border-color .2s ease-in-out, outline-color .2s ease-in-out, transform .2s ease-in-out, text-decoration-color .2s ease-in-out, width .2s ease-in-out, height .2s ease-in-out;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid rgba(0, 0, 0, .15);
    font-variation-settings: "wght" 450;
    padding: .75rem 0 .75rem 1.375rem;
    background-image: url("/assets/images/arrow.svg");
    background-position: 0 1.1875rem;
    background-repeat: no-repeat
}

@media screen and (min-width: 68.75rem) {
    .listing a {
        padding: .75rem 0 .75rem 1.5rem;
        background-position-y: 1.25rem
    }
}

.listing a:hover {
    background-position-x: .125rem
}

.listing-item__title {
    font-variation-settings: "wght" 450;
    font-size: 1.125rem;
    line-height: 1.625rem;
    hyphens: manual;
    letter-spacing: -0.018em;
    font-variation-settings: "wght" 580
}

@media screen and (min-width: 40rem) {
    .listing-item__title {
        font-size: 1.25rem;
        line-height: 1.8125rem
    }
}

.listing-item__meta {
    color: rgba(0, 0, 0, .6)
}

.box-out {
    margin-top: 2.5rem;
    background-color: #fdf7f7;
    padding: 1.25rem;
    margin-bottom: 2.5rem
}

.box-out p:last-child {
    margin-bottom: 0
}

.hero {
  min-height: 40vh;
  background: linear-gradient(rgba(250, 99, 99, 0.65), rgba(250, 99, 99, 0.65)), url('https://madisonaf.com/img/madisonaf-clear.png') no-repeat center center;
  background-size: cover;
  color: #f9f9f0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 900;
}
.hero a {
  color: #fff;
}
.hero-insta {
  min-height: 40vh;
  background: linear-gradient(rgba(250, 99, 99, 0.65), rgba(250, 99, 99, 0.65));
  background-size: cover;
  color: #f9f9f0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 900;
  padding: 10px;
}
.insta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}
@media screen and (min-width: 68.75rem) {
    .hero {
        min-height: 90vh
    }
}

.intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    padding: 5rem 0
}

.intro h1 {
    line-height: .95;
    letter-spacing: -0.01em;
    max-width: 6em;
    text-align: center;
     font-weight:bolder;
}

@media screen and (min-width: 40rem) {
    .intro h1 {
        font-size: 9.5rem;
        font-weight:bolder;
    }
}

@media screen and (max-height: 50rem)and (min-width: 40rem) {
    .intro h1 {
        font-size: 6.625rem;
        font-weight:bolder;
    }
}

.intro img {
    display: flex;
    width: 5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

@media screen and (min-width: 68.75rem) {
    .intro img {
        width: 7.25rem
    }
}

@media screen and (max-height: 56.25rem)and (min-width: 40rem) {
    .intro img {
        width: 6.25rem
    }
}

header {
    background-color: #f9f9f0;
    border-top: 40px solid #fa6363
}

@media screen and (min-width: 68.75rem) {
    header {
        border-top-width: 44px
    }
}

header .logo {
    width: 2.75rem;
    position: relative;
    top: -1.625rem;
    margin-bottom: -1.625rem
}

@media screen and (min-width: 68.75rem) {
    header .logo {
        width: 3.75rem;
        position: relative;
        top: -2.375rem;
        margin-bottom: -2.375rem
    }
}

footer {
    background-color: #fdf7f7;
    text-align: center
}

@media screen and (max-width: 68.75rem) {
    footer {
        font-family: "btg-sans", -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: .9375rem;
        line-height: 1.25rem
    }
}

@media screen and (max-width: 68.75rem)and (min-width: 40rem) {
    footer {
        font-size: 1rem;
        line-height: 1.5rem
    }
}

main {
    background-color: #f9f9f0
}

.footer-illustration {
    margin-bottom: 2.5rem
}

@view-transition {
    navigation: auto
}

::view-transition-group(root) {
    animation-duration: .2s
}

html {
    height: 100%;
    font-size: 100%;
    font-family: "btg-sans", -apple-system, BlinkMacSystemFont, sans-serif
}

@media screen and (min-width: 20.625rem) {
    html {
        font-size: 1rem
    }
}

@media screen and (max-height: 1000px)and (min-width: 125rem) {
    html {
        font-size: 1rem
    }
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

body {
    background-color: #fa6363;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    color: #111;
    font-family: "btg-sans", -apple-system, BlinkMacSystemFont, sans-serif;
    font-variation-settings: "wght" 450;
    font-size: 1.125rem;
    line-height: 1.625rem;
    hyphens: manual;
    letter-spacing: -0.018em;
    margin-bottom: 0 !important;
    font-feature-settings: "ss01" on, "ss04" on, "calt" off;
    font-family: "btg-sans", -apple-system, BlinkMacSystemFont, sans-serif;
    font-variation-settings: "wght" 450;
    font-size: 1.125rem;
    line-height: 1.625rem;
    hyphens: manual;
    letter-spacing: -0.018em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

@media screen and (min-width: 40rem) {
    body {
        font-size: 1.25rem;
        line-height: 1.8125rem
    }
}

@media screen and (min-width: 40rem) {
    body {
        font-size: 1.25rem;
        line-height: 1.8125rem
    }
}

.body-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh
}

main {
    flex: 1
}

img {
    display: block
}

strong {
    font-variation-settings: "wght" 580
}

em {
    font-style: italic
}

code {
    background-color: #f0f0f0;
    font-family: monospace;
    font-size: .9em
}

p,
.p {
    margin-bottom: 1.25rem
}

@media screen and (min-width: 68.75rem) {
    p,
    .p {
        margin-bottom: 1.25rem
    }
}

a {
    color: #111;
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, .6);
    text-decoration-color: #fa6363;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color .2s ease-in-out, background-color .2s ease-in-out, background-image .2s ease-in-out, background-position .2s ease-in-out, border-color .2s ease-in-out, outline-color .2s ease-in-out, transform .2s ease-in-out, text-decoration-color .2s ease-in-out, width .2s ease-in-out, height .2s ease-in-out;
    font-variation-settings: "wght" 500
}

a:hover {
    color: #fa6363;
    text-decoration-thickness: 2px;
    text-decoration-color: #fa6363
}

a:active {
    color: #fa6363
}

/*# sourceMappingURL=styles.css.map */