:root {
--hjt-bg: #ffffff;
--hjt-text: #111111;
--hjt-muted: #6f6f6f;
--hjt-line: rgba(17,17,17,.12);
--hjt-max: 1240px;
--hjt-narrow: 820px;
--hjt-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--hjt-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
html {
scroll-behavior: smooth;
}
body.home,
body.blog {
background: var(--hjt-bg);
color: var(--hjt-text);
font-family: var(--hjt-sans);
margin: 0;
}
.admin-bar .hjt-site-header {
top: 32px;
}
.hjt-page {
min-height: 100vh;
}
.hjt-site-header {
position: sticky;
top: 0;
z-index: 40;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: rgba(255,255,255,.82);
border-bottom: 1px solid transparent;
}
.hjt-site-header.is-scrolled {
border-bottom-color: var(--hjt-line);
}
.hjt-inner {
width: min(calc(100% - 48px), var(--hjt-max));
margin: 0 auto;
}
.hjt-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 18px 0;
}
.hjt-brand {
display: flex;
gap: 12px;
align-items: baseline;
text-decoration: none;
color: inherit;
}
.hjt-brand-name {
font-family: var(--hjt-serif);
font-size: 1.8rem;
line-height: 1;
font-weight: 600;
}
.hjt-brand-city,
.hjt-nav a,
.hjt-kicker,
.hjt-subline,
.hjt-contact-note,
.hjt-imprint,
.hjt-lecture-line {
color: var(--hjt-muted);
}
.hjt-nav {
display: flex;
gap: 18px;
flex-wrap: wrap;
}
.hjt-nav a {
text-decoration: none;
font-size: .95rem;
}
.hjt-nav a:hover,
.hjt-nav a:focus,
.hjt-mail:hover,
.hjt-mail:focus {
color: var(--hjt-text);
}
.hjt-hero {
min-height: 100svh;
display: flex;
align-items: center;
}
.hjt-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
gap: clamp(40px, 7vw, 100px);
align-items: center;
padding: clamp(36px, 7vw, 72px) 0 clamp(80px, 10vw, 120px);
}
.hjt-kicker {
display: block;
margin-bottom: 12px;
font-size: 1rem;
letter-spacing: .04em;
}
.hjt-title {
margin: 0;
font-family: var(--hjt-serif);
font-size: clamp(4rem, 10vw, 7.6rem);
line-height: .88;
font-weight: 600;
text-wrap: balance;
}
.hjt-subline {
font-size: clamp(1.2rem, 2.2vw, 1.6rem);
font-style: italic;
margin: 18px 0 0;
}
.hjt-hero-image img {
width: 100%;
max-width: 560px;
display: block;
margin-left: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: 28px;
box-shadow: 0 28px 90px rgba(0,0,0,.16);
}
.hjt-section {
padding: clamp(90px, 14vw, 180px) 0 0;
}
.hjt-section:last-of-type {
padding-bottom: 100px;
}
.hjt-section-grid {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 36px;
}
.hjt-section-title {
margin: 0;
font-family: var(--hjt-serif);
font-size: clamp(2.4rem, 5vw, 3.5rem);
line-height: .95;
font-weight: 600;
position: sticky;
top: 110px;
align-self: start;
}
.hjt-copy {
max-width: var(--hjt-narrow);
}
.hjt-copy p,
.hjt-lecture-line,
.hjt-contact-block p,
.hjt-imprint {
font-size: clamp(1.1rem, 1.35vw, 1.28rem);
line-height: 1.8;
margin: 0 0 1.1em;
}
.hjt-copy p:last-child,
.hjt-contact-block p:last-child,
.hjt-imprint:last-child {
margin-bottom: 0;
}
.hjt-insights {
display: grid;
gap: 18px;
}
.hjt-insight {
font-family: var(--hjt-serif);
font-size: clamp(1.8rem, 3vw, 2.6rem);
line-height: 1.05;
padding-bottom: 18px;
border-bottom: 1px solid var(--hjt-line);
}
.hjt-insight:last-child {
border-bottom: 0;
}
.hjt-lecture-line {
font-size: clamp(1.3rem, 2vw, 1.6rem);
}
.hjt-contact-card {
border-top: 1px solid var(--hjt-line);
padding-top: 28px;
}
.hjt-mail {
display: inline-block;
font-family: var(--hjt-serif);
font-size: clamp(2rem, 3.5vw, 3rem);
line-height: 1.05;
text-decoration: none;
color: var(--hjt-text);
word-break: break-word;
}
.hjt-contact-note {
margin-top: 12px;
}
.hjt-footer {
padding: 24px 0 60px;
}
.hjt-footer-row {
display: flex;
justify-content: space-between;
gap: 20px;
align-items: flex-start;
border-top: 1px solid var(--hjt-line);
padding-top: 18px;
}
.hjt-imprint {
font-size: .92rem;
line-height: 1.6;
max-width: 620px;
}
.hjt-footer-link {
text-decoration: none;
color: var(--hjt-muted);
white-space: nowrap;
}
.hjt-footer-link:hover,
.hjt-footer-link:focus {
color: var(--hjt-text);
}
@media (max-width: 900px) {
.hjt-hero-grid,
.hjt-section-grid {
grid-template-columns: 1fr;
}
.hjt-hero {
min-height: auto;
}
.hjt-hero-grid {
padding-top: 32px;
}
.hjt-hero-image {
order: -1;
}
.hjt-hero-image img {
margin: 0;
max-width: 100%;
aspect-ratio: 4 / 4.7;
}
.hjt-section-title {
position: static;
}
.hjt-nav {
display: none;
}
.hjt-footer-row {
flex-direction: column;
}
}
@media (max-width: 600px) {
.hjt-inner {
width: min(calc(100% - 32px), var(--hjt-max));
}
.hjt-brand {
flex-direction: column;
gap: 2px;
align-items: flex-start;
}
.hjt-brand-name {
font-size: 1.55rem;
}
}