/* Cameranerd theme: the look of the WordPress (Oxygen) site. Lato for text, Nunito for headings, red #e84855 and orange #ff9b71. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Lato, sans-serif; font-size: 16px; line-height: 1.6; color: #404040; background: #fff; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a { color: #0074db; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-family: Nunito, sans-serif; font-weight: 700; color: #333; margin: 0; overflow-wrap: break-word; }
/* Headings never break inside a word, as on WordPress. Only a word wider than its heading (a long Dutch compound on a
   phone, where WordPress made the page wider than the screen) is hyphenated: the script at the end of base.html.twig
   wraps such a word in span.hyphenate. */
.hyphenate { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: auto 4 4; }
h1, h2 { font-size: 36px; }
h3, h4 { font-size: 24px; }
h5, h6 { font-size: 18px; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
main { display: block; }

/* Header: two links left and right of the logo in a red diamond. */
.site-header { position: relative; z-index: 10; background: #fff; }
.main-nav { display: grid; grid-template-columns: 1fr 200px 1fr; align-items: center; max-width: 1120px; height: 67px; margin: 0 auto; }
.nav-side { display: flex; align-items: center; height: 100%; }
.nav-left { justify-content: flex-end; padding-right: 32px; }
.nav-right { justify-content: flex-start; padding-left: 68px; }
.nav-link { font-family: Nunito, sans-serif; font-size: 16px; font-weight: 700; color: #9e9e9e; cursor: pointer; transition: color .2s; }
.nav-link:hover, .nav-dropdown[open] > .nav-link { color: #ff9b71; }
.nav-line { width: 2px; height: 24px; margin: 0 35px; }
.nav-left .nav-line { margin: 0 6px 0 32px; }
.nav-dropdown { position: relative; padding: 0 30px; }
.nav-dropdown > summary { list-style: none; }
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown-panel { position: absolute; z-index: 2; top: 100%; left: 30px; display: flex; flex-direction: column; padding: 4px 0 10px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .08); white-space: nowrap; }
.nav-dropdown-panel a { padding: 10px 16px 0; font-size: 16px; color: #9e9e9e; }
.nav-dropdown-panel a:hover { color: #ff9b71; }
.logo { position: relative; justify-self: center; align-self: start; width: 200px; height: 67px; }
.logo::before { content: ''; position: absolute; left: 0; top: -100px; width: 200px; height: 200px; transform: rotate(45deg); background: linear-gradient(90deg, #ff9b71, #e84855); border: 10px solid; border-color: #f4a28b #e84855 #e84855 #f4a28b; transition: transform .2s; }
.logo:hover::before { transform: scale(1.05) rotate(45deg); }
.logo img { position: absolute; left: 60px; top: 16px; width: 80px; opacity: .7; transition: opacity .2s; }
.logo:hover img { opacity: 1; }
.mobile-menu { display: none; }

@media (max-width: 991px) {
    .main-nav { display: none; }
    .site-header { height: 60px; }
    /* The menu button: a grey square at the top right. Open, the menu covers the screen in grey, centred, in spaced
       capitals; the button becomes a red cross a little lower down, as on WordPress. Equal padding above and below keeps
       the items in the middle of the screen; a menu taller than the screen starts below the cross and scrolls. */
    .mobile-menu { display: block; position: absolute; top: 0; right: 0; }
    .mobile-menu > summary { list-style: none; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: #dedede; cursor: pointer; transition: background-color .2s; }
    .mobile-menu > summary:hover { background: #d1d1d1; }
    .mobile-menu > summary::-webkit-details-marker { display: none; }
    .mobile-menu > summary span { display: flex; }
    .mobile-menu > summary svg { width: 28px; height: 28px; fill: #000; }
    .mobile-menu-close, .mobile-menu[open] .mobile-menu-open { display: none !important; }
    .mobile-menu[open] .mobile-menu-close { display: flex !important; }
    .mobile-menu[open] > summary { position: fixed; z-index: 31; top: 20px; right: 0; }
    .mobile-menu > summary .mobile-menu-close svg { fill: #e84855; transition: fill .2s; }
    .mobile-menu > summary:hover .mobile-menu-close svg { fill: #ff6d6d; }
    .mobile-menu-panel { position: fixed; z-index: 30; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; justify-content: safe center; padding: 90px 20px; overflow: auto; background: #eee; }
    .mobile-menu-panel a, .mobile-menu-panel summary { display: block; padding: 8px 12px; font-family: Lato, sans-serif; font-size: 16px; font-weight: 900; line-height: 2; letter-spacing: 2px; text-transform: uppercase; text-align: center; color: #333; cursor: pointer; transition: color .2s, background-color .2s; }
    .mobile-menu-panel a:hover, .mobile-menu-panel summary:hover { background: #ddd; color: #e84855; }
    .mobile-menu-panel a[aria-current="page"] { color: #f00; }
    .mobile-menu-panel details { min-width: 193px; }
    .mobile-menu-panel details[open] { background: #ddd; }
    .mobile-menu-panel details summary { list-style: none; }
    .mobile-menu-panel details summary::-webkit-details-marker { display: none; }
    .mobile-menu-panel details summary svg { width: 22px; height: 22px; margin-left: 2px; vertical-align: -4px; fill: #333; transition: transform .2s; }
    .mobile-menu-panel details[open] summary svg { transform: rotate(180deg); }
}

/* Footer: red-to-orange gradient, four columns, small legal links (Oxygen template 59). */
.site-footer { margin-top: 60px; padding: 20px 0 0; background-image: linear-gradient(50deg, #e84855, #ff9b71); color: #dbdbdb; }
.footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; padding: 20px; }
.footer-grid p { margin: 0 0 4px; }
.footer-grid a { margin-bottom: 12px; color: #dbdbdb; transition: color .2s; }
.footer-grid a:hover { color: #fff; text-decoration: underline; }
.footer-brand { font-family: Nunito, sans-serif; font-size: 30px; font-weight: 700; line-height: 1.1; color: #fff; margin-bottom: 5px !important; }
.footer-title { font-family: Nunito, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.1; color: #fff; margin-bottom: 12px !important; }
.site-footer address { font-style: normal; }
.site-footer address a { display: inline; margin: 0; }
.socials { display: flex; gap: 10px; margin: 0 0 0 -10px; }
.socials a { display: flex; width: 40px; height: 40px; margin: 0; align-items: center; justify-content: center; }
.socials svg { width: 20px; height: 20px; fill: #dbdbdb; transition: fill .2s; }
.socials a:hover svg { fill: #fff; }
.footer-bottom { padding: 20px 40px; }
.footer-bottom nav { display: flex; padding-top: 5px; }
.footer-bottom nav a { margin: 0 16px 0 0; font-size: 12px; line-height: 1.6; color: #dbdbdb; transition: color .2s; }
.footer-bottom nav a:hover { color: #fff; text-decoration: underline; }
.footer-bottom p { margin: 8px 0 12px; font-size: 12px; color: #fff; }
@media (max-width: 767px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-grid > div { align-items: center; text-align: center; }
    .footer-grid > div > p:not([class]) { text-align: left; }
    .footer-bottom nav { align-items: center; justify-content: center; text-align: center; }
    .footer-bottom p { text-align: center; }
}

/* Titles of pages, category pages and the author page: large, with a thin red line under it. */
.page-title { display: inline-block; max-width: 100%; margin: 0 0 18px; padding-bottom: 0; font-size: 48px; font-weight: 600; line-height: 1.6; border-bottom: 1px solid #e84855; }
/* On WordPress a title as wide as its longest word could run into the page's side margin ("Toegankelijkheid" is 367px
   on a 390px phone); here it may use that 20px too. A longer word is hyphenated (see .hyphenate). */
.page-title { max-width: calc(100% + 20px); }
/* A category name that wraps (on phones) is centred, as on WordPress. */
.archive .page-title { text-align: center; }

/* Posts: the article in a 65% column, slightly left of centre, as on WordPress. */
/* The empty space under the author box is WordPress's: its post section's padding and an empty section (295px). */
.post-layout { max-width: 1120px; margin: 0 auto; padding: 95px 20px 185px; }
.post { width: 65%; margin-left: 20%; padding: 0 20px; }
.post-categories { margin: 0; font-size: 12px; color: #dbdbdb; }
.post-categories a { color: #afafaf; }
.post-categories a:hover { color: #e84855; }
.post h1 { margin: 0 0 18px; font-size: 46px; font-weight: 800; line-height: 1.1; text-transform: capitalize; }
.byline { display: flex; align-items: center; gap: 0; padding: 5px 0; }
.byline img { width: 60px; height: 60px; margin-right: 6px; border-radius: 50%; object-fit: cover; }
.byline p { margin: 0; padding-left: 16px; font-size: 14px; color: #9e9e9e; }
.byline a { font-weight: 600; color: #9e9e9e; display: inline-block; transition: all .1s ease-in-out; }
.byline a:hover { color: #e84855; transform: translateY(-3px); }
.kicker { margin: 22px 0 10px; font-family: Nunito, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.5; color: #333; }
.featured { display: block; width: 725px; border-radius: 20px; }
.affiliate-note { margin: 12px 0; font-size: 12px; font-style: italic; color: #9e9e9e; }
.post-content { font-size: 19px; line-height: 1.65; }

/* Article text. */
.content h2 { margin: 20px 0 12px; font-size: 30px; line-height: 1.65; }
.content h3 { margin: 18px 0 10px; font-size: 24px; line-height: 1.5; }
.content h4 { margin: 16px 0 8px; font-size: 21px; }
.content p { margin: 0 0 1em; }
/* A long web address in the text breaks instead of widening the page on narrow phones. */
.content :is(p, li) { overflow-wrap: break-word; }
/* An image on its own line is centred, like WordPress's aligncenter; an image inside a line of text stays inline. */
.content p > img:only-child, .content > img { display: block; margin: 0 auto 20px; }
.content blockquote { margin: 1em 0; padding: 4px 20px; border-left: 4px solid #e84855; }
.content blockquote cite { font-size: 15px; color: #717171; }
/* Posts use the browser's spacing as WordPress did: 1em around paragraphs and lists, none around headings. */
.post-content { display: flow-root; }
.post-content p { margin: 1em 0; }
.post-content h2, .post-content h3 { margin: 0; line-height: 1.65; }
.post-content ol { margin: 1em 0; padding-left: 40px; }
.post-content ul { margin: 1em 0; list-style: none; padding-left: 20px; }
.post-content ul li { position: relative; padding-left: 30px; margin-bottom: 20px; }
.post-content ul li::before { content: ''; position: absolute; left: 0; top: .8333em; width: 8px; height: 8px; background: #e84855; }
/* Links to other articles: a grey pill with a small "open" icon. */
.post-content a[href^="/"]:not(.toc a) { position: relative; display: inline-flex; align-items: baseline; padding: 2px 25px 2px 8px; border-radius: 8px; background: #eee; color: #000; font-weight: 700; }
.post-content a[href^="/"]:not(.toc a)::before { content: ''; position: absolute; right: 6px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXNxdWFyZS1hcnJvdy1vdXQtdXAtcmlnaHQiPjxwYXRoIGQ9Ik0yMSAxM3Y2YTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0yVjVhMiAyIDAgMCAxIDItMmg2Ii8+PHBhdGggZD0ibTIxIDMtOSA5Ii8+PHBhdGggZD0iTTE1IDNoNnY2Ii8+PC9zdmc+') center / contain no-repeat; }
.post-content a[href^="/"]:not(.toc a):hover { background: #ddd; }

/* Tables: white card with an orange header row, striped rows. A table wider than the column (long words in many
   columns) scrolls sideways in its own frame (div.table-scroll, added in _toc.html.twig) instead of widening the
   page; the frame leaves room for the table's shadow. From 1120px up such a table runs into the empty space right of
   the column, as on WordPress (the widest, 856px, still ends 88px before the edge of a 1280px screen). */
.table-scroll { overflow-x: auto; margin: 0 -10px 8px; padding: 0 10px 12px; }
/* 20px after a table, as on WordPress: the frame's padding and margin make the gap, so the next paragraph or list
   adds no margin of its own (it could not fold into the padding). */
.post-content .table-scroll + * { margin-top: 0; }
@media (min-width: 1120px) { .table-scroll { overflow-x: visible; } }
.content table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, .1); }
.content th { padding: 12px 15px; background: #ff5805; color: #fff; font-weight: 700; text-align: left; }
.content td { padding: 12px 15px; border-bottom: 1px solid #ddd; }
.content tbody tr:nth-child(even) { background: #f3f3f3; }
.content tbody tr:hover { background: #ffe5d9; }
@media (max-width: 767px) {
    .content th, .content td { padding: 8px 10px; font-size: 14px; }
}

/* Table of contents: grey box, "1 -" numbers and "a." letters. */
.toc { margin-bottom: 20px; padding: 20px; border: 1px solid #ddd; border-radius: 12px; background: #f8f8f8; }
.toc h2 { margin: 0 0 12px; font-size: 30px; line-height: 1.65; }
.toc ol { list-style: none; counter-reset: item; margin: 0; padding-left: 40px; }
.toc > ol { margin: 1em 0; }
.toc li { position: relative; margin-bottom: .6em; font-size: .9em; }
.toc > ol > li::before { counter-increment: item; content: counter(item) "  -"; position: absolute; left: -.8em; font-weight: 800; }
.toc ol ol { counter-reset: subitem; margin-top: 6px; }
.toc ol ol > li::before { counter-increment: subitem; content: counter(subitem, lower-alpha) ". "; position: absolute; left: -.4em; }
.toc a { padding-left: .9em; color: #333; }
.toc a:hover, .toc a:focus { text-decoration: underline; }

/* The author box under each post. */
.author-box { display: flex; gap: 15px; margin: 0 0 50px; padding: 30px; border: .5px solid rgba(38, 153, 142, .39); border-radius: 30px; }
.author-box-photo { display: flex; flex-direction: column; align-items: center; flex: 0 0 168px; }
.author-box-photo img { width: 168px; height: 168px; margin-bottom: 15px; border-radius: 50%; object-fit: cover; }
.author-box-photo svg { width: 29px; height: 34px; fill: #0d65c2; }
.author-box-role { width: fit-content; margin: 0 0 4px; font-size: 14px; color: #9e9e9e; border-bottom: 1px solid #e84855; }
.author-box-name { display: block; }
.author-box-name h4 { font-size: 30px; line-height: 1.6; color: #333; transition: color .2s; }
.author-box-name:hover h4 { color: #e84855; }
.author-box-bio { margin: 16px 0; font-size: 16px; line-height: 1.6; color: #9e9e9e; }

@media (max-width: 991px) {
    .post-layout { padding-top: 115px; padding-bottom: 225px; }
    .post { width: 100%; margin-left: 0; }
}
@media (max-width: 479px) {
    /* WordPress kept 40px on each side on phones, which pushed long titles off the screen; 20px here. */
    .post-layout { padding: 115px 20px 225px; }
    .post { padding: 0; }
    .post h1 { font-size: 36px; }
    .byline { flex-direction: column; align-items: flex-start; }
    .byline p { margin-top: 9px; padding-left: 16px; }
    .author-box { flex-direction: column; gap: 0; }
    .author-box-photo { flex-direction: row; flex-basis: auto; align-items: center; }
    .author-box-photo img { width: 200px; height: 200px; margin: 0 40px 15px 0; }
}

/* Lists of articles (category, author and "Populair" pages): photo left, title and byline right, grey line under. */
.archive, .page { padding-top: 75px; }
.archive { padding-bottom: 15px; }
.list-title { margin: 0 0 5px; font-size: 24px; }
.post-rows { margin-top: 0; }
.post-row { display: flex; align-items: center; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 2px solid #dbdbdb; }
.post-row img { display: block; width: 222px; height: 125px; margin-right: 20px; border-radius: 10px; object-fit: cover; }
.post-row h3 { margin: 0; font-size: 22px; line-height: 1.6; color: #333; transition: color .3s; }
.post-row a:hover h3 { color: #ff9b71; }
.post-rows .post-row-meta { margin: 0 0 12px; font-size: 16px; color: #404040; }
/* The author's name and the date each stay on one line in a narrow column, as on WordPress. */
.post-row-meta span { white-space: nowrap; }
.pagination { display: flex; flex-wrap: wrap; margin: 0; font-size: 12px; }
.pagination span { color: #404040; }
.archive > .list-title:last-child { margin-top: 0; }
@media (max-width: 767px) {
    /* Category pages put the photo above the title. */
    .post-row { flex-direction: column; align-items: flex-start; }
    .post-row img { margin: 0 0 15px; }
    .list-title { margin-bottom: 25px; }
    /* "Populair" and the author page keep a 167px photo beside the title, as WordPress did; a word too long for the
       title column ("Middenformaatcamera's") is hyphenated (see .hyphenate) instead of running off the screen. */
    :is(.page-content, .author-list) .post-row { flex-direction: row; align-items: center; }
    :is(.page-content, .author-list) .post-row > a { flex: 0 0 167px; margin-right: 20px; }
    :is(.page-content, .author-list) .post-row > div { flex: 1 1 0; min-width: 0; }
    :is(.page-content, .author-list) .post-row img { width: 100%; margin: 0; }
}
@media (max-width: 479px) {
    /* Category pages use smaller author and date lines on phones; "Populair" and the author page do not. */
    .post-rows .post-row-meta { font-size: 14px; }
    :is(.page-content, .author-list) .post-rows .post-row-meta { font-size: 16px; }
}

/* Pages: WordPress separated their paragraphs with blank lines (25.6px), with 16px around each text block and
   none around the headings. */
.page { padding-bottom: 15px; }
.page .page-title { margin-bottom: 14px; }
.page-content { font-size: 16px; line-height: 1.6; }
.page-content .page-intro { margin: 0 0 13px; font-size: 22px; line-height: 1.6; color: #333; }
.page-content > p:first-child:not(.page-intro) { margin-top: 0; }
.page-content p { margin: 16px 0; }
.page-content p + p { margin-top: 25.6px; }
.page-content h2 { font-size: 30px; line-height: 1.6; margin: 0; }
.page-content ul, .page-content ol { padding-left: 40px; }
/* A photo on a page (Over ons) sits 12px under the intro and 8px above the next heading. */
.page-content p:has(> img:only-child) { margin: 0 0 8px; }
.page-content p > img:only-child { margin-bottom: 0; }
/* The Populair page: its list starts 75px under the title, as on WordPress. */
.page-content > .post-rows:first-child { margin-top: 75px; }

/* Author page (Oxygen template 63): photo and name, the biography, then the author's articles. */
.author-hero { display: flex; align-items: center; padding-top: 75px; padding-bottom: 75px; }
.author-hero img { flex: 0 0 auto; width: 200px; height: 200px; margin-right: 37px; border-radius: 50%; object-fit: cover; }
.author-hero h1 { font-size: 36px; font-weight: 700; line-height: 1.2; }
.author-hero p { margin: 0; color: #333; }
.author-role { margin-bottom: 15px !important; font-weight: 500; }
.author-expertise { margin-bottom: 8px !important; }
.author-about h2 { margin: 0; font-size: 30px; line-height: 1.6; }
.author-about p { margin: 16px 0; }
/* WordPress put the biography's paragraphs straight under their headings, after an empty line under the intro. */
.author-about h3 { margin: 0; font-size: 24px; line-height: 1.6; }
.author-about h3 + p { margin: 0; }
.author-about h2 + p + h3 { margin-top: 73px; }
.author-list { padding-top: 57px; }
.author-hero + .author-list { padding-top: 0; }
.author-more { margin: 0 0 22px; font-size: 30px; line-height: 1.6; }
.author-list .post-rows { margin-top: 0; }
@media (max-width: 767px) {
    /* WordPress kept the photo beside the name, which pushed the page wider than a phone; here the name goes under it. */
    .author-hero { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* Contact cards and the team. */
.contact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin: 34px 20px 30px; }
.contact-card { display: flex; flex-direction: column; align-items: center; padding: 48px 36px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .1); text-align: center; }
.contact-card svg { width: 36px; height: 36px; margin-bottom: 12px; fill: #e84855; }
.contact-card h2 { margin: 0 0 8px; font-family: Lato, sans-serif; font-size: 24px; font-weight: 700; line-height: 1; color: #e84855; text-transform: uppercase; }
.contact-card address { font-style: normal; font-size: 14px; font-weight: 700; color: #333; }
.contact-card a { font-size: 14px; font-weight: 700; color: #333; letter-spacing: .15em; }
.team { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; margin: 34px 0 64px; }
.team-member { width: 320px; }
.team-member img { display: block; width: 300px; height: 300px; margin: 0 0 12px; object-fit: cover; }
.team-member h3 { margin: 0 0 12px; font-size: 30px; font-weight: 500; line-height: 1; }
.team-member h3 a { color: #333; transition: color .2s; }
.team-member h3 a:hover { color: #e84855; }
/* The role: small and pale yellow, as on WordPress. */
.team-role { font-size: 12px; line-height: 1.4; color: #fffd82; }
.page-content .team-member p { margin: 0 0 12px; }
.page-content .team-member p:not([class]) { margin: 0; font-weight: 500; line-height: 1.4; color: #333; }
.team-member > a { display: block; }
.team-social { display: inline-flex; width: 24px; height: 24px; margin-top: 12px; align-items: center; justify-content: center; border-radius: 50%; background: #e84855; }
.team-social svg { width: 12px; height: 12px; fill: #fff; }
@media (max-width: 991px) {
    /* The team page: the intro moves 80px down and the member takes the full width (WordPress's section padding). */
    .page-intro:has(+ .team) { margin-top: 81px; }
    .team { margin-bottom: 6px; }
    .team-member { width: 100%; padding: 0 20px; }
}
@media (max-width: 767px) {
    .contact-cards { grid-template-columns: minmax(0, 1fr); }
    /* Phones centre the team page, as WordPress did. */
    .page-intro:has(+ .team), .team-member { text-align: center; }
    .team-member img { margin-left: auto; margin-right: auto; }
    .team { margin-bottom: -34px; }
}

/* Home page: the sizes and spacing of the WordPress home (Oxygen page 17). */
.home-hero { padding: 75px 0; background: #eaeaea; text-align: center; }
.home-hero h2 { margin-top: 97px; font-size: 53px; font-weight: 800; line-height: 1.6; }
.home-section { position: relative; padding: 75px 0; }
/* The section titles are centred as blocks; a title that wraps (on phones) reads from the left, as on WordPress. */
.home-section > .container { display: flex; flex-direction: column; align-items: center; }
.home-wave { position: absolute; left: 0; top: -1px; width: 100%; transform: scaleY(-1); }
.home-wave-red { height: 110px; color: #e84855; }
.home-wave-grey { height: 100px; color: #eaeaea; }
.home-wave-about { height: 70px; color: #eaeaea; transform: scale(-1, -1); }
.home-kicker { margin: 0 0 13px; font-size: 22px; line-height: 1.6; color: #333; }
.home-title { margin: 0 0 16px; font-size: 40px; font-weight: 700; line-height: 1.6; border-bottom: 1px solid #e84855; }
.home-featured-section { padding: 165px 0 138px; }
.home-featured { display: flex; width: 100%; }
.home-featured-card { width: 60%; margin-bottom: 35px; padding: 20px; }
.home-featured-card img { display: block; width: 100%; border-radius: 50px; }
.home-featured-card h3 { margin-top: 22px; text-align: center; font-size: 30px; font-weight: 700; line-height: 1.6; color: #333; transition: color .2s; }
.home-featured-card a:hover h3 { color: #e84855; }
.home-about { padding-top: 75px; background: #eaeaea; }
.home-about-row { display: flex; }
.home-about-intro { width: 50%; text-align: left; }
.home-about-intro h2 { margin: 0; font-size: 55px; font-weight: 800; line-height: 1.6; border-bottom: 4px solid #e84855; }
.home-about-intro p { margin: 24px 0 0; color: #333; }
.home-about-intro p + p { margin-top: 25.6px; }
.home-about-intro p:last-child { margin-bottom: 25.6px; }
.home-about-items { display: flex; flex-direction: column; align-items: flex-end; width: 50%; }
.home-about-items > div { display: flex; flex-direction: column; align-items: flex-start; width: 60%; margin-bottom: 30px; }
.home-about-items h4 { font-size: 21px; line-height: 1.6; color: #333; border-bottom: 1px solid #e84855; }
.home-about-items p { margin: 9px 0 10px; color: #333; }
.home-about-items a { font-weight: 700; text-decoration: underline; }
.home-categories-section { padding-top: 160px; }
.home-categories-section .home-kicker { margin-bottom: 0; }
.home-categories { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; }
.home-categories a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 20%; height: 150px; margin: 20px 15px; padding: 0 10px; border: 3px solid #e84855; border-radius: 50px; color: #e84855; font-family: Nunito, sans-serif; font-size: 18px; line-height: 1.6; text-align: center; transition: transform .3s, border-width .3s; }
.home-categories a:hover { transform: scale(1.05); border-width: 4px; }
.home-categories svg { width: 60px; height: 60px; fill: #e84855; }
.home-latest { display: flex; flex-wrap: wrap; width: 100%; }
.home-latest-card { width: 33.33%; margin-bottom: 48px; padding: 10px; }
.home-latest-image { position: relative; display: block; margin-bottom: 16px; }
.home-latest-image img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 15px; }
.home-latest-date { position: absolute; top: 1em; right: 1em; padding: .7em 1em; border-radius: 30px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 11.2px; font-weight: 700; line-height: 1.6; }
/* The 6.4px under the title is WordPress's empty meta line, which it hid from 1120px down. */
.home-latest-title { display: block; margin-bottom: 6.4px; font-size: 20px; font-weight: 600; line-height: 1.2; color: #000; text-transform: capitalize; }
.home-latest-title:hover { color: #e84855; }
/* The footer follows the last list directly, as on WordPress. */
main:has(.home-latest-section) + .site-footer { margin-top: 0; }
@media (max-width: 1120px) {
    .home-latest-card { width: 50%; }
    .home-latest-title { margin-bottom: 0; }
}
@media (max-width: 991px) {
    /* WordPress's empty second column then sits under the article and adds its padding (40px). */
    .home-featured-section { padding-bottom: 178px; }
    .home-featured { flex-direction: column; align-items: center; }
    .home-featured-card { width: 100%; }
    /* The category buttons stack, full width. */
    .home-categories { flex-direction: column; }
}
@media (max-width: 767px) {
    .home-about-row { flex-direction: column; }
    .home-about-intro, .home-about-items { width: 100%; }
    .home-about-items { align-items: flex-start; margin-top: 41px; }
    .home-about-items > div { width: 100%; }
    .home-latest-card { width: 100%; }
}
@media (max-width: 479px) {
    .home-featured-card { padding-bottom: 0; }
    .home-featured-card h3 { font-size: 20px; }
    .home-about-intro h2 { font-size: 32px; }
    .home-about-intro p:first-of-type { margin-top: 16px; }
    .home-categories a { width: 100%; max-width: 266px; margin: 20px auto; }
}

/* 404: one centred line (the footer's own 60px margin makes up WordPress's 75px under it). */
.not-found { padding-top: 175px; padding-bottom: 15px; text-align: center; }
.not-found h1 { font-size: 36px; line-height: 1.6; }