@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
--black: #111111;
--gray: #707070;
--light-gray: #dedede;
--background: #fafafa;

--font: "Inter", Arial, Helvetica, sans-serif;

--max-width: 1180px;


}

/* =========================
BASE
========================= */

{
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
margin: 0;
padding: 0;

background: var(--background);
color: var(--black);

font-family: var(--font);
font-size: 15px;
line-height: 1.55;

-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;


}

a {
color: inherit;
text-decoration: none;
}

a:hover {
color: #666;
}

/* =========================
HEADER
========================= */

.site-header {
width: min(calc(100% - 48px), var(--max-width));

margin: 0 auto;
padding: 20px 0;

display: flex;
align-items: center;
justify-content: space-between;

border-bottom: 1px solid var(--light-gray);


}

.brand {
display: flex;
align-items: center;
gap: 15px;
}

.monogram {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.12em;
white-space: nowrap;
}

.brand-name {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
}

.main-nav {
display: flex;
gap: 26px;
}

.main-nav a {
position: relative;

font-size: 11px;
font-weight: 500;

text-transform: uppercase;
letter-spacing: 0.09em;


}

.main-nav a::after {
content: "";

position: absolute;
left: 0;
bottom: -5px;

width: 0;
height: 1px;

background: var(--black);

transition: width 0.18s ease;


}

.main-nav a:hover::after,
.main-nav a.active::after {
width: 100%;
}

/* =========================
MOBILE MENU
========================= */

.menu-toggle {
display: none;

border: 0;
background: none;

width: 28px;
padding: 3px 0;

cursor: pointer;


}

.menu-toggle span {
display: block;

height: 1px;
background: var(--black);

margin: 6px 0;


}

/* =========================
MAIN
========================= */

main {
width: min(calc(100% - 48px), var(--max-width));
margin: 0 auto;
}

/* =========================
INTRO
========================= */

.intro {
padding: 105px 0 115px;
max-width: 900px;
}

.eyebrow {
margin: 0 0 22px;

font-size: 10px;
font-weight: 600;

letter-spacing: 0.14em;
text-transform: uppercase;

color: var(--gray);


}

.intro h1 {
margin: 0;

max-width: 850px;

font-size: clamp(48px, 7vw, 88px);
font-weight: 500;
line-height: 0.98;

letter-spacing: -0.055em;


}

.intro-text {
max-width: 560px;

margin: 32px 0 0;

font-size: 17px;
line-height: 1.55;

color: #4d4d4d;


}

/* =========================
SECTIONS
========================= */

.section-line {
border-top: 1px solid var(--light-gray);

padding: 48px 0 75px;


}

.section-heading {
display: grid;

grid-template-columns: 55px 1fr;

margin-bottom: 42px;


}

.section-heading span {
color: var(--gray);
font-size: 10px;
}

.section-heading h2 {
margin: 0;

font-size: 23px;
font-weight: 500;

letter-spacing: -0.025em;


}

/* =========================
POSTS
========================= */

.post-preview {
display: grid;

grid-template-columns: 155px minmax(0, 680px);

column-gap: 35px;

padding: 30px 0;

border-top: 1px solid var(--light-gray);


}

.post-type {
margin: 0;

font-size: 9px;
font-weight: 600;

letter-spacing: 0.12em;

color: var(--gray);


}

.post-preview h3 {
margin: 0 0 12px;

max-width: 680px;

font-size: 29px;
font-weight: 500;

line-height: 1.12;

letter-spacing: -0.035em;


}

.post-preview p {
max-width: 600px;

margin: 0;

font-size: 14px;

color: #555;


}

.post-meta {
margin-top: 17px;

font-size: 9px;
font-weight: 500;

text-transform: uppercase;
letter-spacing: 0.08em;

color: var(--gray);


}

/* =========================
TOPICS
========================= */

.topic-grid {
display: grid;

grid-template-columns: repeat(2, 1fr);

border-top: 1px solid var(--light-gray);


}

.topic-grid a {
padding: 20px 0;

border-bottom: 1px solid var(--light-gray);

font-size: 22px;
font-weight: 500;

letter-spacing: -0.025em;

transition:
    padding-left 0.18s ease,
    color 0.18s ease;


}

.topic-grid a:hover {
padding-left: 10px;
}

/* =========================
ABOUT
========================= */

.about-content {
max-width: 750px;
}

.large-text {
margin: 0 0 28px;

font-size: 28px;
font-weight: 400;

line-height: 1.35;

letter-spacing: -0.025em;


}

.text-link {
font-size: 10px;
font-weight: 600;

text-transform: uppercase;
letter-spacing: 0.1em;

border-bottom: 1px solid var(--black);

padding-bottom: 3px;


}

/* =========================
INTERNAL PAGES
========================= */

.page-intro {
max-width: 800px;

padding: 90px 0 75px;


}

.page-intro h1 {
margin: 0;

font-size: clamp(48px, 7vw, 82px);
font-weight: 500;

line-height: 0.98;
letter-spacing: -0.055em;


}

.page-intro > p:not(.eyebrow) {
max-width: 590px;

margin-top: 30px;

font-size: 17px;
line-height: 1.55;

color: #4d4d4d;


}

.lead {
font-size: 24px !important;
font-weight: 400;
}

/* =========================
TOPIC LIST
========================= */

.topic-list {
border-top: 1px solid var(--light-gray);
}

.topic-item {
display: grid;

grid-template-columns: 55px 1fr;

padding: 32px 0;

border-bottom: 1px solid var(--light-gray);


}

.topic-item > span {
color: var(--gray);
font-size: 10px;
}

.topic-item h2 {
margin: 0 0 6px;

font-size: 28px;
font-weight: 500;

letter-spacing: -0.035em;


}

.topic-item p {
max-width: 570px;

margin: 0;

font-size: 14px;

color: #555;


}

/* =========================
ARCHIVE
========================= */

.archive {
border-top: 1px solid var(--light-gray);
}

.archive-year {
padding: 45px 0 85px;
}

.archive-year > h2 {
margin: 0 0 25px;

font-size: 30px;
font-weight: 500;

letter-spacing: -0.035em;


}

.archive-item {
display: grid;

grid-template-columns: 155px 1fr;

gap: 35px;

padding: 22px 0;

border-top: 1px solid var(--light-gray);


}

.archive-item time,
.archive-item span {
font-size: 9px;
font-weight: 500;

text-transform: uppercase;
letter-spacing: 0.1em;

color: var(--gray);


}

.archive-item h3 {
margin: 6px 0;

font-size: 21px;
font-weight: 500;

letter-spacing: -0.025em;


}

.archive-item p {
margin: 0;

font-size: 11px;

color: var(--gray);


}

/* =========================
ARTICLE
========================= */

.article-body {
max-width: 700px;

padding: 0 0 100px;


}

.article-body p {
margin: 0 0 25px;

font-size: 17px;
line-height: 1.75;

color: #333;


}

.article-body h2 {
margin: 60px 0 20px;

font-size: 27px;
font-weight: 500;

letter-spacing: -0.025em;


}

/* =========================
CONTACT
========================= */

.contact {
border-top: 1px solid var(--light-gray);

padding: 65px 0 110px;


}

.contact-email {
display: inline-block;

font-size: clamp(27px, 5vw, 55px);
font-weight: 500;

line-height: 1;

letter-spacing: -0.045em;

border-bottom: 1px solid var(--black);


}

.contact-social {
display: flex;
gap: 28px;

margin-top: 45px;


}

.contact-social a {
font-size: 10px;
font-weight: 600;

text-transform: uppercase;
letter-spacing: 0.1em;


}

/* =========================
FOOTER
========================= */

.site-footer {
width: min(calc(100% - 48px), var(--max-width));

margin: 0 auto;

padding: 30px 0;

border-top: 1px solid var(--light-gray);

display: grid;

grid-template-columns: 1fr 1fr 1fr;

align-items: center;


}

.footer-links {
display: flex;
gap: 22px;

justify-content: center;


}

.footer-links a {
font-size: 9px;
font-weight: 500;

text-transform: uppercase;
letter-spacing: 0.08em;


}

.copyright {
margin: 0;

text-align: right;

font-size: 9px;

color: var(--gray);


}

/* =========================
RESPONSIVE
========================= */

@media (max-width: 800px) {

.site-header,
main,
.site-footer {
    width: min(calc(100% - 32px), var(--max-width));
}

.site-header {
    padding: 16px 0;
}

.brand-name {
    display: none;
}

.menu-toggle {
    display: block;
}

.main-nav {
    display: none;

    position: absolute;

    top: 65px;
    right: 16px;

    padding: 20px;

    background: var(--background);

    border: 1px solid var(--light-gray);

    flex-direction: column;
    gap: 17px;

    z-index: 10;
}

.main-nav.open {
    display: flex;
}

.intro {
    padding: 75px 0 85px;
}

.intro h1 {
    font-size: clamp(45px, 13vw, 72px);
}

.intro-text {
    font-size: 16px;
}

.section-line {
    padding: 38px 0 60px;
}

.section-heading {
    grid-template-columns: 42px 1fr;
    margin-bottom: 30px;
}

.section-heading h2 {
    font-size: 20px;
}

.post-preview {
    display: block;
    padding: 25px 0;
}

.post-type {
    margin-bottom: 17px;
}

.post-preview h3 {
    font-size: 25px;
}

.topic-grid {
    grid-template-columns: 1fr;
}

.topic-grid a {
    font-size: 20px;
    padding: 17px 0;
}

.large-text {
    font-size: 24px;
}

.page-intro {
    padding: 70px 0 60px;
}

.page-intro h1 {
    font-size: clamp(45px, 13vw, 72px);
}

.topic-item {
    grid-template-columns: 42px 1fr;
    padding: 27px 0;
}

.topic-item h2 {
    font-size: 25px;
}

.archive-item {
    grid-template-columns: 1fr;
    gap: 8px;
}

.site-footer {
    grid-template-columns: 1fr;
    gap: 22px;
}

.footer-links {
    justify-content: flex-start;
}

.copyright {
    text-align: left;
}


}

@media (prefers-reduced-motion: reduce) {

html {
    scroll-behavior: auto;
}

* {
    transition: none !important;
}


}