@font-face {
  font-family: "Nunito";
  src: url("media/fonts/Nunito-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("media/fonts/Nunito-Italic-VariableFont_wght.ttf") format("truetype");
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
}
:root {
  --paper: #f5f2ec; --surface: #fffdfa; --ink: #191918; --muted: #6d6a64; --line: #d8d3ca;
  --sound: #c8453b; --school: #47765a; --travel: #3f7198; --accent: var(--ink);
  --wrap: min(1160px, calc(100vw - 48px)); --serif: "Iowan Old Style", "Baskerville", "Times New Roman", serif; --sans: "Nunito", "Aptos", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.6; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
::selection { color: white; background: var(--accent); }
.wrap { width: var(--wrap); margin-right: auto; margin-left: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 8px 12px; background: white; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; z-index: 50; top: 0; display: grid; grid-template-columns: 1fr auto auto; gap: 34px; align-items: center; min-height: 74px; padding: 0 max(24px, calc((100vw - 1160px) / 2)); border-bottom: 1px solid var(--line); background: rgba(245,242,236,.96); backdrop-filter: blur(12px); }
.wordmark { display: inline-flex; align-items: center; gap: 11px; width: max-content; }
.wordmark > span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid currentColor; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.wordmark strong { font-size: 14px; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a { padding: 24px 0 20px; border-bottom: 3px solid transparent; font-size: 13px; font-weight: 700; }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-color: currentColor; }
.nav-sound { color: var(--sound); } .nav-school { color: var(--school); } .nav-travel { color: var(--travel); }
.send-mark { display: grid; width: 38px; height: 38px; place-items: center; color: white; background: var(--accent); transition: transform .2s ease; }
.send-mark:hover { transform: translateY(-2px); }
.send-mark span { display: block; font-size: 19px; transform: rotate(-45deg) translate(-1px, 1px); }
.menu-toggle { display: none; }
.home-intro { display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; min-height: 590px; padding-top: 110px; padding-bottom: 105px; align-items: end; border-bottom: 1px solid var(--line); }
.home-intro .eyebrow { grid-column: 1 / -1; align-self: start; }
.eyebrow, .section-heading > p, .page-kicker { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -.04em; line-height: 1; }
.home-intro h1 { font-size: clamp(4.2rem, 8vw, 8.2rem); }
.home-about { max-width: 500px; padding-top: 26px; border-top: 4px solid var(--ink); }
.home-about p { margin: 0 0 18px; }
.about-lead { font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2.15rem); line-height: 1.25; }
.portal-section, .featured-section { padding-top: 105px; padding-bottom: 110px; }
.section-heading { display: grid; grid-template-columns: 1fr auto; gap: 12px 30px; align-items: end; margin-bottom: 44px; }
.section-heading > p { grid-column: 1 / -1; }
.section-heading h2 { font-size: clamp(2.8rem, 5vw, 4.7rem); }
.section-heading > a { padding-bottom: 7px; border-bottom: 1px solid var(--ink); font-size: 13px; font-weight: 700; }
.portal-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.portal-card { --card-accent: var(--ink); position: relative; display: flex; min-height: 400px; padding: 28px; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); transition: background-color .2s ease, transform .2s ease; }
.portal-card::after { position: absolute; right: -1px; bottom: -1px; left: -1px; height: 9px; background: var(--card-accent); content: ""; }
.portal-card:hover { transform: translateY(-5px); background: white; }
.card-sound { --card-accent: var(--sound); } .card-school { --card-accent: var(--school); } .card-travel { --card-accent: var(--travel); }
.card-index { color: var(--card-accent); font-size: 12px; font-weight: 700; }
.card-arrow { position: absolute; top: 22px; right: 28px; color: var(--card-accent); font-size: 28px; }
.portal-card p { margin: 0 0 8px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.portal-card h3 { margin-bottom: 18px; font-size: clamp(3.3rem, 5vw, 5rem); }
.portal-card small { color: var(--muted); font-size: 13px; }
.featured-section { border-top: 1px solid var(--line); }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.compact-grid { grid-template-columns: repeat(4, 1fr); }
.post-card { --post-accent: var(--accent); position: relative; display: flex; min-height: 285px; padding: 24px; flex-direction: column; border: 1px solid var(--line); background: var(--surface); transition: transform .2s ease, border-color .2s ease, background-color .2s ease; }
.post-card:hover { transform: translateY(-4px); border-color: var(--post-accent); background: white; }
.post-card::before { position: absolute; top: -1px; right: -1px; left: -1px; height: 5px; background: var(--post-accent); content: ""; }
.post-card.sound-post { --post-accent: var(--sound); } .post-card.school-post { --post-accent: var(--school); } .post-card.travel-post { --post-accent: var(--travel); }
.post-meta { display: flex; justify-content: space-between; margin-bottom: 52px; color: var(--post-accent); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.post-card h2, .post-card h3 { font-size: clamp(1.8rem, 3vw, 2.75rem); line-height: 1.08; }
.post-card p { margin: auto 0 0; padding-top: 30px; color: var(--muted); font-size: 15px; }
.contact-card { display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; margin-bottom: 90px; padding: 54px; color: white; background: var(--ink); scroll-margin-top: 100px; }
.contact-copy h2 { margin: 12px 0 20px; font-size: clamp(3.2rem, 6vw, 5.8rem); white-space: nowrap; }
.contact-copy > p:not(.eyebrow) { max-width: 420px; color: rgba(255,255,255,.68); }
.contact-card .eyebrow { color: rgba(255,255,255,.5); }
.email-link { display: inline-block; margin: 18px 0 34px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.5); }
.socials { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.socials a { color: rgba(255,255,255,.62); font-size: 14px; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.contact-form label { margin: 16px 0 5px; color: rgba(255,255,255,.54); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.contact-form label[for="message"], .contact-form textarea, .contact-form button, .form-status { grid-column: 1 / -1; }
.contact-form input, .contact-form textarea { width: 100%; padding: 10px 0; color: white; border: 0; border-bottom: 1px solid rgba(255,255,255,.35); border-radius: 0; outline: 0; background: transparent; }
.contact-form input:focus, .contact-form textarea:focus { border-color: white; }
.contact-form textarea { min-height: 115px; resize: vertical; }
.contact-form button { display: flex; justify-content: space-between; margin-top: 26px; padding: 14px 16px; color: var(--ink); border: 0; border-radius: 0; background: white; font-weight: 750; cursor: pointer; }
.honeypot { position: absolute; left: -10000px; }
.form-status { padding: 10px; border: 1px solid rgba(255,255,255,.3); } .form-status.error { border-color: var(--sound); } .form-status.success { border-color: var(--school); }
.section-page { --accent: var(--ink); } .theme-sound { --accent: var(--sound); } .theme-school { --accent: var(--school); } .theme-travel { --accent: var(--travel); }
.page-intro { padding-top: 100px; padding-bottom: 82px; border-bottom: 1px solid var(--line); }
.page-intro-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; align-items: end; }
.page-kicker { margin-bottom: 26px; color: var(--accent); }
.page-intro h1 { font-size: clamp(4.8rem, 10vw, 9.5rem); color: var(--accent); }
.page-intro-copy { max-width: 480px; padding-top: 22px; border-top: 4px solid var(--accent); }
.page-intro-copy p { margin: 0; font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.3; }
.archive { padding-top: 90px; padding-bottom: 115px; }
.archive-tools { display: flex; justify-content: space-between; align-items: end; margin-bottom: 42px; }
.archive-tools h2 { font-size: clamp(2.8rem, 5vw, 4.7rem); }
.archive-tools p { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.post-card .post-link { display: flex; justify-content: space-between; margin-top: 24px; padding-top: 15px; border-top: 1px solid var(--line); color: var(--post-accent); font-size: 14px; font-weight: 700; }
.archive-note { margin-top: 44px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.site-footer { display: grid; grid-template-columns: 1fr auto auto; gap: 40px; align-items: center; padding: 28px max(24px, calc((100vw - 1160px) / 2)); border-top: 1px solid var(--line); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.site-footer p { margin: 0; }

.article-shell { max-width: 900px; padding-top: 64px; padding-bottom: 110px; }
.back-link { display: inline-block; margin-bottom: 70px; padding-bottom: 5px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.article-header { padding-bottom: 46px; border-bottom: 1px solid var(--line); }
.article-header h1 { max-width: 820px; margin: 16px 0 32px; color: var(--accent); font-size: clamp(4rem, 9vw, 8rem); line-height: .92; }
.article-summary { max-width: 680px; margin: 0; font-family: var(--serif); font-size: clamp(1.5rem, 2.5vw, 2.1rem); line-height: 1.35; }
.article-meta { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 32px; color: var(--muted); font-size: 13px; }
.article-body { max-width: 720px; margin: 64px auto 0; font-size: 18px; line-height: 1.78; }
.article-body h2 { margin: 64px 0 20px; font-size: clamp(2.2rem, 4.5vw, 3.7rem); }
.article-body p { margin: 0 0 24px; }
.article-body a { color: var(--accent); border-bottom: 1px solid currentColor; }
.article-media { margin: 48px -70px; }
.article-media img { display: block; width: 100%; height: auto; }
.article-media figcaption { margin-top: 10px; color: var(--muted); font-size: 13px; }
.article-placeholder { padding: 28px; border-left: 5px solid var(--accent); background: var(--surface); color: var(--muted); font-size: 15px; }
.article-nav { display: flex; justify-content: space-between; gap: 24px; margin-top: 80px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 700; }

.maintenance-page { min-height: 100svh; background: var(--paper); }
.maintenance-shell { display: grid; width: var(--wrap); min-height: 100svh; margin: 0 auto; padding: 32px 0; grid-template-rows: auto 1fr auto; }
.maintenance-top, .maintenance-foot { display: flex; align-items: center; justify-content: space-between; }
.maintenance-top { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.maintenance-top p, .maintenance-foot p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.maintenance-content { display: flex; max-width: 820px; padding: 80px 0; align-self: center; flex-direction: column; align-items: flex-start; }
.maintenance-content h1 { margin: 18px 0 34px; font-size: clamp(4.5rem, 10vw, 9.5rem); line-height: .88; }
.maintenance-lead { max-width: 580px; margin: 0 0 30px; color: var(--muted); font-size: clamp(1.1rem, 2vw, 1.35rem); }
.maintenance-status { display: inline-flex; margin-bottom: 38px; padding: 10px 14px; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 700; }
.maintenance-status span { width: 9px; height: 9px; background: var(--sound); animation: maintenance-pulse 1.8s ease-in-out infinite; }
.maintenance-email { padding-bottom: 5px; border-bottom: 1px solid var(--ink); font-size: 15px; font-weight: 700; }
.maintenance-foot { padding-top: 24px; border-top: 1px solid var(--line); }
.maintenance-colors { display: grid; width: min(260px, 45vw); height: 7px; grid-template-columns: repeat(3, 1fr); }
.maintenance-colors i:nth-child(1) { background: var(--sound); }
.maintenance-colors i:nth-child(2) { background: var(--school); }
.maintenance-colors i:nth-child(3) { background: var(--travel); }
@keyframes maintenance-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .32; } }
@media (max-width: 900px) {
  :root { --wrap: min(100% - 40px, 760px); }
  .site-header { padding: 0 20px; }
  .menu-toggle { display: grid; width: 38px; height: 38px; padding: 9px; place-content: center; gap: 4px; border: 0; background: transparent; }
  .menu-toggle i { display: block; width: 20px; height: 1px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
  .menu-open .menu-toggle i:nth-child(1) { transform: translateY(5px) rotate(45deg); } .menu-open .menu-toggle i:nth-child(2) { opacity: 0; } .menu-open .menu-toggle i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
  .site-nav { position: fixed; inset: 74px 0 auto; display: grid; padding: 22px 20px 28px; border-bottom: 1px solid var(--line); background: var(--paper); transform: translateY(-130%); transition: transform .25s ease; }
  .menu-open .site-nav { transform: translateY(0); }
  .site-nav a { padding: 10px 0; font-family: var(--serif); font-size: 28px; }
  .home-intro, .page-intro-grid { grid-template-columns: 1fr; gap: 45px; }
  .home-intro { min-height: auto; padding-top: 80px; padding-bottom: 80px; }
  .portal-grid { grid-template-columns: 1fr; } .portal-card { min-height: 300px; }
  .compact-grid, .post-grid { grid-template-columns: 1fr 1fr; }
  .contact-card { grid-template-columns: 1fr; gap: 50px; padding: 42px; }
  .article-media { margin-right: 0; margin-left: 0; }
}
@media (max-width: 620px) {
  :root { --wrap: calc(100% - 28px); }
  .site-header { gap: 10px; padding: 0 14px; } .wordmark strong { display: none; }
  .home-intro h1 { font-size: clamp(3.9rem, 19vw, 5.8rem); }
  .home-intro { padding-top: 66px; padding-bottom: 64px; }
  .portal-section, .featured-section { padding-top: 72px; padding-bottom: 75px; }
  .section-heading { grid-template-columns: 1fr; } .section-heading > a { width: max-content; }
  .portal-card { min-height: 270px; padding: 22px; }
  .post-grid, .compact-grid { grid-template-columns: 1fr; }
  .post-card { min-height: 250px; }
  .contact-card { width: 100%; margin-bottom: 0; padding: 54px 20px; }
  .contact-copy h2 { font-size: clamp(3rem, 15vw, 4.5rem); }
  .contact-form { grid-template-columns: 1fr; } .contact-form label, .contact-form input, .contact-form textarea { grid-column: 1; }
  .page-intro { padding-top: 65px; padding-bottom: 60px; } .page-intro h1 { font-size: clamp(4.2rem, 21vw, 7rem); }
  .archive { padding-top: 68px; padding-bottom: 80px; } .archive-tools { display: block; }
  .article-shell { padding-top: 44px; padding-bottom: 75px; }
  .back-link { margin-bottom: 46px; }
  .article-body { margin-top: 46px; font-size: 17px; }
  .maintenance-shell { width: calc(100% - 28px); padding: 20px 0; }
  .maintenance-content { padding: 60px 0; }
  .maintenance-content h1 { font-size: clamp(4rem, 20vw, 6.2rem); }
  .maintenance-foot { align-items: flex-start; flex-direction: column; gap: 18px; }
  .site-footer { grid-template-columns: 1fr auto; padding: 24px 14px; } .site-footer > p:first-of-type { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }

/* Homepage 3.0 - shared visual language with Education */
.home-page {
  --paper: #f2f6f3; --surface: #ffffff; --ink: #173641; --muted: #6d7f86; --line: #d9e5e7;
  --sound: #b84f47; --school: #247866; --travel: #3978a4; --yellow: #f4cc57; --mint: #dff3ed;
  background:
    radial-gradient(circle at 8% 17%, rgba(244, 204, 87, .12), transparent 25rem),
    radial-gradient(circle at 92% 66%, rgba(0, 174, 181, .06), transparent 30rem),
    var(--paper);
}
.home-page h1, .home-page h2, .home-page h3 { font-family: var(--sans); font-weight: 950; letter-spacing: -.055em; }
.home-page .site-header { min-height: 76px; border-color: rgba(217, 229, 231, .88); background: rgba(242, 246, 243, .92); }
.home-page .wordmark > span { border: 0; border-radius: 10px; color: white; background: var(--ink); font-weight: 900; }
.home-page .wordmark strong { color: var(--ink); font-weight: 900; }
.home-page .site-nav a { padding: 9px 12px; border: 0; border-radius: 9px; transition: background .16s ease, color .16s ease; }
.home-page .site-nav a:hover { background: var(--surface); }
.home-page .send-mark { width: 40px; height: 40px; color: var(--ink); border-radius: 50%; background: var(--yellow); }
.home-page .home-intro { position: relative; min-height: 600px; margin-top: 24px; padding: 82px 72px 65px; grid-template-columns: 1.1fr .9fr; gap: 70px; overflow: hidden; color: white; border: 0; border-radius: 28px; background: #132f38; }
.home-page .home-intro::before { position: absolute; top: 55px; right: 10%; width: 125px; height: 18px; border-radius: 20px; background: var(--yellow); transform: rotate(-7deg); content: ""; }
.home-page .home-intro::after { position: absolute; right: -65px; bottom: -78px; width: 260px; height: 260px; border: 26px solid rgba(255, 255, 255, .075); border-radius: 50%; content: ""; }
.home-page .home-intro .eyebrow { position: relative; z-index: 1; color: #a8d8cd; }
.home-page .home-intro h1 { position: relative; z-index: 1; align-self: end; font-size: clamp(4.6rem, 9vw, 8.2rem); }
.home-page .home-about { position: relative; z-index: 1; max-width: 520px; padding: 26px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 18px; background: rgba(255, 255, 255, .07); }
.home-page .home-about p { color: #c9dad6; }
.home-page .home-about .about-lead { color: white; font-family: var(--sans); font-size: clamp(1.45rem, 2.4vw, 2.05rem); font-weight: 850; letter-spacing: -.035em; }
.home-page .portal-section, .home-page .featured-section { padding-top: 100px; padding-bottom: 105px; }
.home-page .portal-section { overflow: clip; }
.home-page .section-heading h2 { color: var(--ink); font-size: clamp(2.8rem, 5vw, 4.7rem); }
.home-page .section-heading > p { color: var(--school); }
.home-page .portal-grid { gap: 14px; border: 0; }
.home-page .portal-card { min-height: 360px; border: 1px solid var(--line); border-radius: 21px; box-shadow: 0 10px 32px rgba(23, 61, 73, .05); }
.home-page .portal-card::before { position: absolute; top: 0; left: 24px; width: 56px; height: 6px; border-radius: 0 0 7px 7px; background: var(--card-accent); content: ""; }
.home-page .portal-card::after { right: -46px; bottom: -60px; left: auto; width: 155px; height: 155px; border-radius: 50%; opacity: .13; background: var(--card-accent); transition: transform .22s ease, opacity .22s ease; }
.home-page .portal-card:hover { border-color: var(--card-accent); transform: translateY(-5px); box-shadow: 0 24px 55px rgba(23, 61, 73, .14); }
.home-page .portal-card:hover::after { opacity: .2; transform: scale(1.14); }
.home-page .portal-card h3 { position: relative; z-index: 1; color: var(--card-accent); font-size: clamp(2.6rem, 4.5vw, 4.25rem); }
.home-page .portal-card p, .home-page .portal-card small { position: relative; z-index: 1; }
.home-page .card-sound { background: #fff7f5; }
.home-page .card-school { background: #f3faf7; }
.home-page .card-travel { background: #f3f8fc; }
.home-page .featured-section { border-top: 1px solid var(--line); }
.home-page .post-card { min-height: 300px; border-radius: 18px; box-shadow: 0 8px 25px rgba(23, 61, 73, .04); }
.home-page .post-card::before { right: 22px; left: 22px; height: 5px; border-radius: 0 0 7px 7px; }
.home-page .post-card:hover { box-shadow: 0 20px 45px rgba(23, 61, 73, .11); }
.home-page .post-card h3 { font-size: clamp(1.8rem, 3vw, 2.55rem); }
.home-page .contact-card { overflow: hidden; color: white; border-radius: 26px; background: #132f38; box-shadow: 0 25px 70px rgba(19, 47, 56, .18); }
.home-page .contact-card::before { position: absolute; top: 0; left: 54px; width: 115px; height: 14px; border-radius: 0 0 20px 20px; background: var(--yellow); content: ""; }
.home-page .contact-card { position: relative; }
.home-page .contact-copy h2 { font-family: var(--sans); font-weight: 950; }
.home-page .contact-form input:focus, .home-page .contact-form textarea:focus { border-color: var(--yellow); }
.home-page .contact-form button { color: var(--ink); border-radius: 10px; background: var(--yellow); }
.home-page .site-footer { border-color: var(--line); }

@media (max-width: 900px) {
  .home-page .home-intro { min-height: auto; padding: 76px 42px 42px; grid-template-columns: 1fr; gap: 45px; }
  .home-page .portal-grid { grid-template-columns: 1fr; }
  .home-page .portal-card { min-height: 280px; }
}
@media (max-width: 620px) {
  .home-page .site-header { min-height: 68px; }
  .home-page .home-intro { width: 100%; margin-top: 0; padding: 70px 20px 28px; border-radius: 0; }
  .home-page .home-intro::before { top: 30px; right: 20px; width: 85px; height: 12px; }
  .home-page .home-intro h1 { font-size: clamp(4rem, 21vw, 6rem); }
  .home-page .home-about { padding: 20px; }
  .home-page .portal-section, .home-page .featured-section { padding-top: 72px; padding-bottom: 75px; }
  .home-page .portal-card { min-height: 245px; }
  .home-page .contact-card { border-radius: 0; }
}

/* Design system 4.0 — shared language across matejblaha.cz */
:root {
  --paper: #f1f1ee;
  --surface: #ffffff;
  --ink: #242626;
  --muted: #6d706e;
  --line: #d9dad6;
  --sound: #b84f47;
  --school: #247866;
  --travel: #3978a4;
  --accent: var(--ink);
  --neutral-soft: #e7e8e4;
  --neutral-dark: #222526;
  --radius: 22px;
  --shadow: 0 16px 42px rgba(31, 35, 34, .08);
  --shadow-hover: 0 24px 56px rgba(31, 35, 34, .14);
  --serif: var(--sans);
}

body {
  overflow-x: clip;
  background:
    radial-gradient(circle at 9% 16%, rgba(36, 38, 38, .035), transparent 25rem),
    radial-gradient(circle at 91% 68%, rgba(36, 38, 38, .025), transparent 32rem),
    var(--paper);
}

h1, h2, h3,
.about-lead,
.page-intro-copy p,
.article-summary,
.site-nav a {
  font-family: var(--sans);
}

h1, h2, h3 {
  font-weight: 950;
  letter-spacing: -.055em;
}

.site-header {
  min-height: 76px;
  border-color: rgba(217, 218, 214, .9);
  background: rgba(241, 241, 238, .92);
}

.wordmark > span {
  color: #fff;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  font-weight: 950;
}

.wordmark strong { font-weight: 900; }

.site-nav { gap: 8px; }
.site-nav a {
  padding: 9px 13px;
  border: 0;
  border-radius: 10px;
  transition: color .18s ease, background-color .18s ease, transform .18s ease;
}
.site-nav a:hover { background: #fff; transform: translateY(-1px); }
.site-nav .nav-sound[aria-current="page"] { color: #fff; background: var(--sound); }
.site-nav .nav-school[aria-current="page"] { color: #fff; background: var(--school); }
.site-nav .nav-travel[aria-current="page"] { color: #fff; background: var(--travel); }

.send-mark {
  width: 40px;
  height: 40px;
  color: #fff;
  border-radius: 50%;
  background: var(--accent);
}

.eyebrow, .section-heading > p, .page-kicker { font-weight: 900; }

/* Neutral homepage; the three disciplines keep their established colours. */
.home-page {
  --paper: #f1f1ee;
  --surface: #ffffff;
  --ink: #242626;
  --muted: #6d706e;
  --line: #d9dad6;
  --yellow: #d9dad6;
  background:
    radial-gradient(circle at 8% 17%, rgba(36, 38, 38, .045), transparent 25rem),
    radial-gradient(circle at 92% 66%, rgba(36, 38, 38, .03), transparent 30rem),
    var(--paper);
}
.home-page .site-header { border-color: rgba(217, 218, 214, .9); background: rgba(241, 241, 238, .92); }
.home-page .send-mark { color: #fff; background: var(--ink); }
.home-page .home-intro { background: var(--neutral-dark); }
.home-page .home-intro::before { background: #cfd1cd; }
.home-page .home-intro::after { border-color: rgba(255, 255, 255, .07); }
.home-page .home-intro .eyebrow { color: #cfd1cd; }
.home-page .home-about { background: rgba(255, 255, 255, .055); }
.home-page .home-about p { color: #cfd1cf; }
.home-page .section-heading > p { color: var(--muted); }
.home-page .portal-card,
.home-page .post-card { background: var(--surface); }
.home-page .card-sound { background: #fff7f5; }
.home-page .card-school { background: #f3faf7; }
.home-page .card-travel { background: #f3f8fc; }
.home-page .contact-card { background: var(--neutral-dark); box-shadow: 0 25px 70px rgba(31, 35, 34, .18); }
.home-page .contact-card::before { background: #cfd1cd; }
.home-page .contact-form input:focus,
.home-page .contact-form textarea:focus { border-color: #fff; }
.home-page .contact-form button { color: var(--ink); background: #e5e6e2; }

/* Section themes */
.theme-sound {
  --accent: var(--sound);
  --theme-dark: #582a2b;
  --theme-soft: #f4dfdc;
  --theme-page: #f7f1ef;
  background:
    radial-gradient(circle at 8% 22%, rgba(184, 79, 71, .08), transparent 28rem),
    var(--theme-page);
}
.theme-school {
  --accent: var(--school);
  --theme-dark: #193d36;
  --theme-soft: #dff0e9;
  --theme-page: #f1f6f3;
  background:
    radial-gradient(circle at 8% 22%, rgba(36, 120, 102, .08), transparent 28rem),
    var(--theme-page);
}
.theme-travel {
  --accent: var(--travel);
  --theme-dark: #203f54;
  --theme-soft: #dfeef7;
  --theme-page: #f0f5f8;
  background:
    radial-gradient(circle at 8% 22%, rgba(57, 120, 164, .09), transparent 28rem),
    var(--theme-page);
}

.section-page .site-header { background: rgba(247, 247, 244, .93); }
.section-page .wordmark > span { background: var(--accent); }

.section-page .page-intro {
  position: relative;
  width: var(--wrap);
  min-height: 510px;
  margin: 24px auto 0;
  padding: 80px 72px 64px;
  overflow: hidden;
  color: #fff;
  border: 0;
  border-radius: 28px;
  background: var(--theme-dark);
}
.section-page .page-intro::before {
  position: absolute;
  top: 52px;
  right: 10%;
  width: 120px;
  height: 17px;
  border-radius: 20px;
  background: var(--accent);
  filter: brightness(1.35) saturate(.85);
  transform: rotate(-7deg);
  content: "";
}
.section-page .page-intro::after {
  position: absolute;
  right: -62px;
  bottom: -82px;
  width: 255px;
  height: 255px;
  border: 25px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  content: "";
}
.section-page .page-intro > .wrap { position: relative; z-index: 1; width: 100%; }
.section-page .page-kicker { color: rgba(255, 255, 255, .68); }
.section-page .page-intro h1 { color: #fff; }
.section-page .page-intro-copy {
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
}
.section-page .page-intro-copy p { color: rgba(255, 255, 255, .86); font-weight: 750; letter-spacing: -.035em; }

.archive-tools > div > p { color: var(--accent); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.archive-tools h2 { color: var(--theme-dark); }
.section-page .post-card {
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow);
}
.section-page .post-card::before { right: 22px; left: 22px; border-radius: 0 0 7px 7px; }
.section-page .post-card::after {
  position: absolute;
  right: -48px;
  bottom: -58px;
  width: 145px;
  height: 145px;
  border-radius: 50%;
  background: var(--theme-soft);
  transition: transform .22s ease;
  content: "";
}
.section-page .post-card:hover { background: #fff; box-shadow: var(--shadow-hover); }
.section-page .post-card:hover::after { transform: scale(1.15); }
.section-page .post-card > * { position: relative; z-index: 1; }
.section-page .post-card h2,
.section-page .post-card h3 { color: var(--theme-dark); }

/* Article pages use the same coloured hero and card language. */
.section-page .article-shell { width: min(1060px, calc(100% - 48px)); max-width: none; }
.section-page .back-link {
  margin-bottom: 28px;
  padding: 9px 13px;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: 10px;
  background: #fff;
  font-weight: 850;
}
.section-page .article-header {
  position: relative;
  padding: 64px;
  overflow: hidden;
  color: #fff;
  border: 0;
  border-radius: 28px;
  background: var(--theme-dark);
}
.section-page .article-header::before {
  position: absolute;
  top: 38px;
  right: 8%;
  width: 105px;
  height: 15px;
  border-radius: 20px;
  background: var(--accent);
  filter: brightness(1.35) saturate(.85);
  transform: rotate(-7deg);
  content: "";
}
.section-page .article-header::after {
  position: absolute;
  right: -55px;
  bottom: -75px;
  width: 220px;
  height: 220px;
  border: 23px solid rgba(255, 255, 255, .075);
  border-radius: 50%;
  content: "";
}
.section-page .article-header > * { position: relative; z-index: 1; }
.section-page .article-header .page-kicker { color: rgba(255, 255, 255, .65); }
.section-page .article-header h1 { max-width: 880px; color: #fff; }
.section-page .article-summary { color: rgba(255, 255, 255, .88); font-weight: 720; letter-spacing: -.03em; }
.section-page .article-meta { color: rgba(255, 255, 255, .62); font-weight: 800; }
.section-page .article-body {
  max-width: 760px;
  padding: 8px 0 0;
}
.section-page .article-body h2 { color: var(--theme-dark); }
.section-page .article-placeholder {
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-left: 6px solid var(--accent);
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--shadow);
}
.section-page .article-nav a {
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.section-page .article-nav a:hover { color: #fff; border-color: var(--accent); background: var(--accent); }

.section-page .site-footer { background: rgba(255, 255, 255, .38); }

@media (max-width: 900px) {
  .section-page .page-intro { min-height: auto; padding: 74px 42px 42px; }
  .section-page .article-shell { width: min(100% - 40px, 820px); }
  .section-page .article-header { padding: 54px 42px; }
}

@media (max-width: 620px) {
  .site-header { min-height: 68px; }
  .site-nav { inset: 68px 0 auto; gap: 5px; }
  .site-nav a { padding: 11px 13px; border-radius: 10px; font-size: 1.35rem; }
  .section-page .page-intro { width: 100%; margin-top: 0; padding: 68px 20px 30px; border-radius: 0; }
  .section-page .page-intro::before { top: 29px; right: 20px; width: 84px; height: 12px; }
  .section-page .page-intro-copy { padding: 20px; }
  .section-page .article-shell { width: calc(100% - 28px); }
  .section-page .article-header { margin-inline: -14px; padding: 62px 20px 34px; border-radius: 0; }
  .section-page .article-header::before { top: 28px; right: 20px; width: 80px; height: 11px; }
  .section-page .article-nav { align-items: stretch; flex-direction: column; }
}