.page-header,
.legal-header {
padding-top: 5.5rem;
padding-bottom: 3.5rem;
text-align: center;
border-bottom: 1px solid var(--line);
}
.page-title,
.legal-title,
.contact-title,
.subscribe-title,
.about-title,
.archive-title,
.article-h1 {
margin: 0 auto;
font-family: var(--serif);
font-weight: 500!important;
}
.page-title {
font-size: clamp(3.3rem, 7vw, 5rem);
line-height: 0.9;
letter-spacing: -0.02em;
max-width: 56.25rem;
}
.page-dek {
margin: 1.75rem auto 0;
max-width: 40rem;
font: 400 1.375rem/1.6 var(--serif);
font-style: italic;
color: var(--muted);
}
.subscribe-hero,
.contact-hero,
.about-hero {
padding-top: 4.5rem;
padding-bottom: 4.5rem;
text-align: center;
}
.contact-hero,
.about-hero {
border-bottom: 1px solid var(--line-strong);
}
.subscribe-title,
.contact-title,
.about-title {
max-width: 62.5rem;
font-size: clamp(3.8rem, 8vw, 6.6rem);
line-height: 0.85;
letter-spacing: -0.03em;
}
.subscribe-dek,
.contact-dek,
.about-dek {
margin: 2rem auto 0;
max-width: 45rem;
font: 400 1.375rem/1.6 var(--serif);
font-style: italic;
}
.pricing-section {
padding-bottom: 6rem;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border: 1px solid var(--line-strong);
background: var(--paper);
}
.tier {
display: flex;
flex-direction: column;
padding: 2.5rem;
border-right: 1px solid var(--line-strong);
}
.tier:last-child {
border-right: none;
}
.tier:hover {
background: #fafafa;
}
.tier-name {
font: 700 0.625rem/1 var(--sans);
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--muted);
display: block;
margin-bottom: 1.375rem;
}
.tier-price {
font-family: var(--serif);
font-size: clamp(2.7rem, 5vw, 4rem);
line-height: 1;
letter-spacing: -0.02em;
font-weight: 400;
color: var(--ink);
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5rem;
}
.tier-price span {
font-family: var(--sans);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--muted);
font-weight: 700;
}
.tier-desc {
margin: 1.375rem 0 0;
color: var(--muted);
}
.tier-features {
list-style: none;
padding: 1.75rem 0;
margin: auto 0 0;
border-top: 1px solid var(--line);
}
.tier-features li {
font: 400 0.875rem/1.7 var(--sans);
color: var(--ink);
margin-bottom: 0.875rem;
display: flex;
gap: 0.75rem;
align-items: flex-start;
}
.tier-features li::before {
content: '—';
color: var(--line-strong);
font-weight: 400;
}
.tier-action {
width: 100%;
padding: 1.125rem;
margin-top: 1.75rem;
text-align: center;
background: var(--paper);
color: var(--ink);
cursor: pointer;
}
.tier-action:hover {
background: var(--ink);
color: var(--paper);
}
.tier.primary {
background: var(--dark);
color: var(--paper);
}
.tier.primary:hover {
background: #191919;
}
.tier.primary .tier-name,
.tier.primary .tier-desc,
.tier.primary .tier-price span {
color: rgba(255, 255, 255, 0.66);
}
.tier.primary .tier-price,
.tier.primary .tier-features li {
color: var(--paper);
}
.tier.primary .tier-features {
border-top-color: rgba(255, 255, 255, 0.2);
}
.tier.primary .tier-features li::before {
color: rgba(255, 255, 255, 0.45);
}
.tier.primary .tier-action {
background: var(--paper);
color: var(--ink);
border-color: var(--paper);
}
.tier.primary .tier-action:hover {
background: transparent;
color: var(--paper);
}
.faq-section {
max-width: 52.5rem;
margin: 0 auto;
padding: 0 0 6rem;
}
.faq-header {
text-align: center;
margin-bottom: 2.625rem;
padding-bottom: 1.375rem;
border-bottom: 1px solid var(--line-strong);
}
.faq-item {
padding: 1.875rem 0;
border-bottom: 1px solid var(--line);
}
.faq-item:last-child {
border-bottom: none;
}
.faq-q {
margin: 0 0 1rem;
font-family: var(--serif);
font-size: 1.75rem;
line-height: 1.2;
font-weight: 400;
}
.institutional-note {
text-align: center;
padding: 2.625rem 0;
border-top: 1px solid var(--line);
font: 400 0.875rem/1.7 var(--sans);
color: var(--muted);
}
.institutional-note a {
color: var(--ink);
border-bottom: 1px solid var(--line-strong);
padding-bottom: 2px;
}
.contact-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 3.5rem;
padding-top: 4.5rem;
padding-bottom: 6.875rem;
}
.directory-dept {
padding: 1.75rem 0;
border-bottom: 1px solid var(--line);
}
.directory-dept h3,
.inquiry-box h3 {
margin: 0 0 0.75rem;
font-family: var(--serif);
font-size: 2rem;
font-weight: 500;
}
.directory-dept p {
margin: 0 0 16px;
font: 400 0.85rem/1.6 var(--sans);
color: var(--muted);
max-width: 400px;
}
.directory-dept a,
.contact-link {
font: 700 0.6875rem/1 var(--sans);
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--ink);
border-bottom: 1px solid var(--ink);
padding-bottom: 0.25rem;
}
.directory-dept a:hover,
.contact-link:hover {
color: var(--muted);
border-color: var(--muted);
}
.form-wrapper {
padding: 2.625rem;
background: #fafafa;
border: 1px solid var(--line);
box-shadow: var(--shadow-soft);
}
.form-group {
margin-bottom: 1.375rem;
}
.form-group label {
display: block;
margin-bottom: 0.75rem;
font: 700 0.625rem/1 var(--sans);
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--muted);
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 1rem;
border: 1px solid var(--line-strong);
background: var(--paper);
font: 400 1rem/1.6 var(--sans);
color: var(--ink);
border-radius: 0;
appearance: none;
}
.form-group input:focus,
.form-group textarea:focus {
outline: 2px solid var(--ink);
outline-offset: 0;
border-color: var(--ink);
}
.form-group textarea {
min-height: 11.25rem;
resize: vertical;
}
.contact-form-title {
margin: 0 0 0.75rem;
}
.contact-form-intro,
.contact-form-note {
color: var(--muted);
}
.contact-form-note {
margin-top: 1.125rem;
padding-top: 1rem;
border-top: 1px solid var(--line);
}
.contact-form-body > :first-child {
margin-top: 0;
}
.contact-form-body > :last-child {
margin-bottom: 0;
}
.legal-title {
font-size: clamp(3rem, 7vw, 4.6rem);
line-height: 0.9;
letter-spacing: -0.02em;
}
.legal-meta {
margin-top: 1.75rem;
font: 700 0.625rem/1 var(--sans);
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--muted);
}
.legal-dek {
max-width: 42rem;
margin: 1rem auto 0;
color: var(--muted);
}
.legal-content {
font-family: var(--serif);
font-size: 1.25rem;
line-height: 1.4;
font-weight: 400;
}
.legal-content h2 {
font-family: var(--serif);
font-size: 1.125rem;
text-transform: uppercase;
letter-spacing: 0.03em;
font-weight: 700;
margin: 1.375rem 0;
padding-top: 1.75rem;
border-top: 1px solid var(--line-strong);
}
.legal-content p {
margin: 0 0 1.5rem;
}
.legal-content ul {
padding-left: 1.25rem;
margin: 0 0 1.875rem;
}
.legal-content li {
margin-bottom: 0.75rem;
}
.manifesto-section {
padding-top: 4.5rem;
padding-bottom: 4.5rem;
border-bottom: 1px solid var(--line);
}
.manifesto-row {
display: grid;
grid-template-columns: 17.5rem minmax(0, 1fr);
gap: 3.5rem;
align-items: start;
max-width: 62.5rem;
margin: 0 auto;
}
.manifesto-label {
font: 700 0.85rem / 1.5 var(--sans);
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--ink);
padding-top: 0.75rem;
border-top: 1px solid var(--line-strong);
}
.manifesto-copy {
font-family: var(--serif);
font-size: 1.2rem;
line-height: 1.6;
}
.manifesto-copy p {
margin: 0 0 1.75rem;
}
.office-image-wrapper {
padding-top: 3.75rem;
padding-bottom: 3.75rem;
border-bottom: 1px solid var(--line-strong);
}
.office-image {
width: 100%;
aspect-ratio: 21/9;
object-fit: cover;
filter: grayscale(100%) contrast(1.3);
border: 1px solid var(--line);
}
.image-caption {
margin-top: 0.875rem;
font: 400 0.75rem/1.6 var(--sans);
color: var(--muted);
text-align: right;
padding-bottom: 0.875rem;
border-bottom: 1px solid var(--line);
}
.masthead-section {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2.625rem;
padding-top: 4.5rem;
padding-bottom: 4.5rem;
border-bottom: 1px solid var(--line-strong);
}
.masthead-col-title {
margin-bottom: 1.625rem;
padding-bottom: 0.875rem;
border-bottom: 1px solid var(--ink);
}
.masthead-list {
list-style: none;
padding: 0;
margin: 0;
}
.masthead-list li {
margin-bottom: 1.125rem;
}
.masthead-role {
display: block;
font: 700 0.625rem/1.4 var(--sans);
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--muted);
}
.masthead-name {
display: block;
font: 400 1.125rem/1.4 var(--serif);
color: var(--ink);
margin-top: 0.25rem;
}
.inquiries-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-bottom: 1px solid var(--line);
}
.inquiry-box {
padding: 3.5rem 2.625rem;
border-right: 1px solid var(--line);
}
.inquiry-box:last-child {
border-right: none;
}
html[data-theme="dark"] .form-wrapper {
background: #0d0d0d;
border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group textarea {
background: #090909;
color: var(--ink);
}