/* ===== UTILITIES ===== */
/* COLOURS */
/* FONTS */
/* EASINGS */
/* MEDIA BREAKPOINTS */
/* PSEUDO ELEMENT */
/* ADD HARDWARE ACCELERATION */
/* EASY GRADIENT */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap");
footer, header, main { display: block; position: relative; padding: 0 3rem; margin: 0 auto; max-width: 1472px; }

/* ===== BASE ===== */
html, body { min-height: 100vh; padding: 0; font-size: 16px; line-height: 1.44; text-rendering: optimizeSpeed; scroll-behavior: smooth; background: #E6E2DF; scrollbar-color: #895f92 #E0DDDA; }

html *, html *:before, html *:after, body *, body *:before, body *:after { box-sizing: border-box; }

/* Remove default margin */
body, h1, h2, h1.small, h3, h4, p, ul[class], ol[class], li, figure, figcaption, blockquote, dl, dd { margin: 0; }

/* Make images responsive by default */
img { display: block; max-width: 100%; height: auto; }

/* Make videos responsive by default */
video { display: block; max-width: 100%; height: auto; }

/* Remove list styles on ul, ol elements with a class attribute */
ul[class], ol[class] { list-style: none; padding: 0; }

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

/* Import fonts */
@font-face { font-family: 'Mersad'; src: url("/assets/fonts/Mersad.ttf") format("truetype-variations"); font-weight: 100 900; font-stretch: 25% 150%; font-style: normal; }

@font-face { font-family: 'Satoshi'; src: url("/assets/fonts/Satoshi-Variable.ttf") format("truetype-variations"); font-weight: 300 900; font-stretch: 25% 150%; font-style: normal; }

/* Text select colour */
::selection { background: #895f92; color: #E6E2DF; }

/* Base text styles and anti aliasing */
h1, h2, h1.small, h3, h4, h5, h6, p, a, label, li, input, textarea, td, button, select { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; color: #0C4027; }

/* HEADER TEXT */
h1, h2, h1.small, h3, h4, h5, h6 { font-family: "Mersad", serif; }

h1.centre, h2.centre, h3.centre, h4.centre, h5.centre, h6.centre { text-align: center; }

h1 { font-size: 64px; font-weight: 655; line-height: 130%; margin: 0 0 1rem; }

h2, h1.small { font-size: 32px; font-weight: 440; line-height: 134%; letter-spacing: -0.01em; margin: 0 0 1rem; }

h3 { font-size: 27px; font-weight: 480; line-height: 134%; letter-spacing: -0.005em; margin: 0 0 1rem; }

h4 { font-family: "IBM Plex Mono", monospace; font-size: 22px; font-weight: 400; line-height: 140%; margin: 0 0 1.5rem; }

h5 { font-size: 18px; font-weight: 500; line-height: 120%; margin: 0 0 1.5rem; color: #E0DDDA; }

h6 { font-family: "IBM Plex Mono", monospace; font-size: 18px; font-weight: 400; line-height: 120%; margin: 0 0 0.75rem; color: #E0DDDA; }

/* BODY TEXT */
p, a, label, li, td, blockquote { font-family: "Satoshi", sans-serif; font-size: 19px; font-weight: 500; line-height: 150%; letter-spacing: 0.008em; margin: 0; }

p a, a a, label a, li a, td a, blockquote a { color: #895f92; }

p a:visited, a a:visited, label a:visited, li a:visited, td a:visited, blockquote a:visited { color: #412d45; }

p a:hover, p a:focus, a a:hover, a a:focus, label a:hover, label a:focus, li a:hover, li a:focus, td a:hover, td a:focus, blockquote a:hover, blockquote a:focus { text-decoration: none; }

p b, p strong, a b, a strong, label b, label strong, li b, li strong, td b, td strong, blockquote b, blockquote strong { font-weight: 700; }

p { margin-bottom: 1.5rem; }

p.large { font-size: 22px; font-weight: 480; line-height: 148%; margin-bottom: 2rem; }

p.legal { font-size: 15px; line-height: 150%; margin: 0; }

/* LIST STYLES */
ul, ol { margin: 0.75rem 0 1rem; padding-left: 2rem; }

ul.callout, ol.callout { list-style: disc; padding-left: 2rem; }

ul.callout li, ol.callout li { font-size: 22px; font-weight: 480; line-height: 148%; margin-bottom: 0.75rem; }

ul li, ol li { margin-bottom: 2px; }

ul li:last-of-type, ol li:last-of-type { margin-bottom: 0; }

/* BLOCKQUOTE STYLES */
blockquote { display: block; position: relative; padding-bottom: 0.75rem; margin: 1.5rem 0; font-style: italic; }

blockquote::after { content: ''; display: block; position: absolute; top: 100%; left: 0; width: 80px; height: 2px; max-width: 100%; background: #895f92; }

/* CODE STYLES */
pre { background: #0C4027; padding: 1rem 1.5rem; margin: 0; white-space: pre-wrap; }

pre code { font-family: monospace, sans-serif; font-size: 15px; line-height: 144%; color: #E0DDDA; }

/* MOBILE STYLES */
@media screen and (max-width: 769px) { h1 { font-size: 58px; } h2, h1.small { font-size: 31px; } h3 { font-size: 24px; } ul.callout li, ol.callout li { font-size: 19px; line-height: 1.35; } }

@media screen and (max-width: 569px) { h1 { font-size: 50px; } h2, h1.small { font-size: 30px; } h3 { font-size: 22px; } p.legal { font-size: 13px; } ul.callout li, ol.callout li { font-size: 18px; line-height: 1.3; } }

@media screen and (max-width: 401px) { h1 { font-size: 44px; } h2, h1.small { font-size: 29px; } }

/* ===== LAYOUT ===== */
/* MAIN */
main .float-right { margin-left: 33%; }

@media screen and (max-width: 1025px) { main .float-right { margin-left: 25%; } }

@media screen and (max-width: 769px) { main .float-right { margin-left: 0; } }

main:last-child { margin-bottom: 0; }

/* SECTIONS */
section { position: relative; margin: 10rem auto; }

section[data-number]::before { content: attr(data-number); display: inline-block; position: absolute; top: 0; left: 0; font-family: "Satoshi", sans-serif; font-size: 18px; font-weight: 550; color: #0C4027; }

@media screen and (max-width: 769px) { section[data-number]::before { top: auto; bottom: calc(100% + 1rem); } }

@media screen and (max-width: 1025px) { section { margin: 8rem auto; } }

@media screen and (max-width: 769px) { section { margin: 6rem auto; } }

/* ARTICLES */
article, .portfolio-list { max-width: 750px; margin-bottom: 4rem; }

@media screen and (max-width: 769px) { article, .portfolio-list { margin-bottom: 3rem; } }

header { width: 100%; height: auto; padding-top: 2rem; margin-bottom: 10rem; }

header.sticky { position: sticky; top: 0; z-index: 1000; }

header .btn { margin: -0.75rem -1rem; }

footer .footer-lower { grid-template-columns: 1fr auto; grid-template-rows: auto; grid-template-areas: "footer-legal footer-social"; gap: 2rem; align-items: center; padding-bottom: 2rem; }

footer .footer-lower .legal-info { grid-area: footer-legal; }

footer .footer-lower .social-links { grid-area: footer-social; }

footer .footer-lower .social-links a { color: #0C4027; transition: color cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s; }

footer .footer-lower .social-links a:hover { color: #895f92; }

footer .footer-lower .social-links svg { display: block; width: 1.5rem; height: auto; }

/* ===== COMPONENTS ===== */
.grid { display: grid; position: relative; grid-auto-rows: auto; }

.grid .grid-item_image { margin-bottom: 1.5rem; }

.grid .grid-item.full-span { grid-column: 1 / -1; }

.grid--two { grid-template-columns: 1fr 1fr; gap: 6rem 8rem; }

@media screen and (max-width: 1301px) { .grid--two { gap: 5rem; } }

@media screen and (max-width: 1025px) { .grid--two { gap: 4rem; } }

@media screen and (max-width: 769px) { .grid--two { grid-template-columns: 1fr; gap: 2.5rem; } }

.btn { display: inline-block; padding: 0.75rem 1rem; text-decoration: none; font-size: 20px; font-weight: 700; line-height: 50%; border-radius: 0.5rem; }

.btn[style^='--icon-before'] { display: inline-grid; grid-template-columns: 1.5rem auto; grid-template-rows: auto; gap: 0.75rem; align-items: center; }

.btn[style^='--icon-before']::before { content: var(--icon-before); width: 100%; height: auto; }

.btn--subtle { background-color: rgba(230, 226, 223, 0.4); transition: background-color cubic-bezier(0.17, 0.84, 0.44, 1) 0.6s; backdrop-filter: blur(0.5rem); }

.btn--subtle:hover, .btn--subtle :focus { background-color: #E0DDDA; }

/* ===== PAGES ===== */
/* HOME PAGE HEADER SPECIFIC */
.home-header { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "name title location"; }

.home-header p.header { font-family: "Mersad", serif; font-size: 32px; font-weight: 655; line-height: 130%; margin-bottom: 0; }

.home-header p.header:first-of-type { grid-area: name; }

.home-header p.header:nth-of-type(2) { text-align: center; grid-area: title; }

.home-header p.header:last-of-type { text-align: right; grid-area: location; }

@media screen and (max-width: 1025px) { .home-header { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-template-areas: "name location" "title title"; } .home-header p.header:nth-of-type(2) { text-align: left; } }

@media screen and (max-width: 769px) { .home-header { display: block; } .home-header p.header { margin-bottom: 0.5rem; } .home-header p.header:last-of-type { text-align: left; } }

/* PORTFOLIO LIST */
.portfolio-list .portfolio-item { display: block; position: relative; margin-bottom: 2.5rem; text-decoration: none; transition: filter cubic-bezier(0.22, 0.61, 0.36, 1) 0.9s; }

.portfolio-list .portfolio-item .bullet { display: inline-block; position: absolute; top: 0.6rem; left: -1.5rem; width: 0.5rem; height: 0.5rem; background-color: #0C4027; transform: rotate(45deg) scale(1); transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.9s, background-color cubic-bezier(0.77, 0, 0.175, 1) 0.9s; pointer-events: none; }

.portfolio-list .portfolio-item h3, .portfolio-list .portfolio-item p { margin-bottom: 0; transform: translateX(0px); filter: blur(0rem); transition: transform cubic-bezier(0.22, 0.61, 0.36, 1) 0.8s, color cubic-bezier(0.22, 0.61, 0.36, 1) 0.8s; }

.portfolio-list .portfolio-item p { transition-delay: 65ms; }

.portfolio-list .portfolio-item:hover, .portfolio-list .portfolio-item:focus { z-index: 5; }

.portfolio-list .portfolio-item:hover .bullet, .portfolio-list .portfolio-item:focus .bullet { background-color: #895f92; transform: rotate(0deg) scale(4); }

.portfolio-list .portfolio-item:hover h3, .portfolio-list .portfolio-item:hover p, .portfolio-list .portfolio-item:focus h3, .portfolio-list .portfolio-item:focus p { color: #895f92; transform: translateX(0.75rem); }

.portfolio-list .portfolio-item.blur { filter: blur(0.25rem); }

.media-grid { margin: 0 -2rem 4rem; gap: 1.5rem; }

.media-grid img { width: calc(100% + 4rem); border-radius: 0.75rem; }

.media-grid.grid--two { gap: 1.5rem; }

@media screen and (max-width: 769px) { .media-grid img { border-radius: 0.5rem; } }

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