*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
background-color: var(--wp--preset--color--base, #f4f4f5);
color: var(--wp--preset--color--contrast, #0f172a);
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration-thickness: 1px;
text-underline-offset: 0.15em;
}
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: #fff;
clip: auto !important;
clip-path: none;
color: #0f172a;
display: block;
font-size: 0.875rem;
height: auto;
left: 5px;
line-height: normal;
padding: 12px 16px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}:root {
--ink-line: #e2e8f0;
--ink-ink: #0f172a;
--ink-paper: #f4f4f5;
--ink-accent: #0d9488;
--ink-accent-deep: #0f766e;
--ink-shell: min(1240px, calc(100% - 2.5rem));
}
body {
font-family: "Space Grotesk", system-ui, sans-serif;
} .ink-header {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in srgb, var(--ink-paper) 92%, white);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--ink-line);
}
.ink-header__inner {
max-width: var(--ink-shell);
margin: 0 auto;
padding: 1rem 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
position: relative;
}
.ink-brand__title {
font-family: "Fraunces", Georgia, serif;
font-size: clamp(1.25rem, 2vw, 1.75rem);
font-weight: 700;
margin: 0;
letter-spacing: -0.02em;
}
.ink-brand__title a {
text-decoration: none;
color: var(--ink-ink);
}
.ink-brand__title a:hover,
.ink-brand__title a:focus-visible {
color: var(--ink-accent);
}
.ink-brand__tag {
margin: 0.15rem 0 0;
font-size: 0.85rem;
color: #64748b;
}
.ink-brand__logo img {
max-height: 48px;
width: auto;
}
.ink-nav-toggle {
display: none;
background: transparent;
border: 1px solid var(--ink-line);
border-radius: 6px;
padding: 0.55rem 0.65rem;
cursor: pointer;
}
.ink-nav-toggle__bar {
display: block;
width: 22px;
height: 2px;
background: var(--ink-ink);
margin: 5px 0;
}
.ink-nav__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1.25rem;
align-items: center;
}
.ink-nav__list a {
text-decoration: none;
font-weight: 500;
color: var(--ink-ink);
}
.ink-nav__list a:hover,
.ink-nav__list a:focus-visible,
.ink-nav__list .current-menu-item > a {
color: var(--ink-accent);
}
.ink-header__rule {
height: 3px;
background: linear-gradient(90deg, var(--ink-accent), #06b6d4, #0f172a);
}
@media (max-width: 768px) {
.ink-nav-toggle {
display: inline-block;
}
.ink-nav {
position: absolute;
left: 0;
right: 0;
top: 100%;
background: var(--ink-paper);
border-bottom: 1px solid var(--ink-line);
max-height: 0;
overflow: hidden;
opacity: 0;
pointer-events: none;
transition: max-height 0.25s ease, opacity 0.2s ease;
}
.ink-nav.is-open {
max-height: 70vh;
opacity: 1;
pointer-events: auto;
}
.ink-nav__list {
flex-direction: column;
align-items: flex-start;
padding: 1rem 1.25rem 1.25rem;
gap: 0.75rem;
}
} .ink-shell {
max-width: var(--ink-shell);
margin-left: auto;
margin-right: auto;
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.ink-mag {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
padding: 2.5rem 0 4rem;
}
@media (min-width: 1024px) {
.ink-mag:has(.ink-mag__aside) {
grid-template-columns: minmax(0, 1fr) 300px;
align-items: start;
}
}
.ink-grid {
display: grid;
gap: 1.5rem;
}
.ink-grid--3 {
grid-template-columns: 1fr;
}
@media (min-width: 560px) {
.ink-grid--3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 900px) {
.ink-grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1320px) {
.ink-grid--3 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.ink-grid--4 {
grid-template-columns: 1fr;
}
@media (min-width: 560px) {
.ink-grid--4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 900px) {
.ink-grid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
} .ink-hero {
background: linear-gradient(118deg, #0f172a 0%, #134e4a 48%, #115e59 100%);
color: #f8fafc;
padding: 2.5rem 0 3rem;
margin-bottom: 0;
}
.ink-hero__grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: center;
}
@media (min-width: 900px) {
.ink-hero__grid {
grid-template-columns: 1.05fr 0.95fr;
}
}
.ink-hero__title {
font-family: "Fraunces", Georgia, serif;
font-size: clamp(2rem, 4vw, 3.25rem);
line-height: 1.05;
margin: 0.35rem 0 0.75rem;
letter-spacing: -0.02em;
}
.ink-hero__title a {
color: inherit;
text-decoration: none;
}
.ink-hero__title a:hover,
.ink-hero__title a:focus-visible {
color: #99f6e4;
}
.ink-hero__excerpt {
font-size: 1.05rem;
line-height: 1.55;
opacity: 0.92;
max-width: 52ch;
}
.ink-hero__excerpt p {
margin: 0;
}
.ink-hero__media-link {
display: block;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}
.ink-hero__image {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.ink-hero__placeholder {
aspect-ratio: 4 / 3;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
border-radius: 14px;
}
.ink-card__label,
.ink-hero .ink-card__label {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.ink-hero .ink-card__label a {
color: #5eead4;
text-decoration: none;
}
.ink-card__label a {
color: var(--ink-accent);
text-decoration: none;
}
.ink-meta {
font-size: 0.875rem;
color: #94a3b8;
margin: 0.75rem 0 0;
}
.ink-hero .ink-meta {
color: #cbd5e1;
}
.ink-meta a {
color: inherit;
text-decoration: underline;
}
.ink-meta__dot {
padding: 0 0.35rem;
}
.ink-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
padding: 0.65rem 1.2rem;
border-radius: 4px;
background: var(--ink-accent);
color: #fff;
font-weight: 600;
text-decoration: none;
border: 1px solid transparent;
}
.ink-button:hover,
.ink-button:focus-visible {
background: var(--ink-accent-deep);
color: #fff;
}
.ink-button--ghost {
background: transparent;
border-color: rgba(248, 250, 252, 0.35);
color: #f8fafc;
}
.ink-button--ghost:hover,
.ink-button--ghost:focus-visible {
border-color: #f8fafc;
background: rgba(248, 250, 252, 0.08);
} .ink-card {
background: #fff;
border: 1px solid var(--ink-line);
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 100%;
box-shadow: 0 10px 30px rgba(10, 15, 28, 0.06);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ink-card:hover {
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(10, 15, 28, 0.1);
}
.ink-card__thumb-link {
display: block;
}
.ink-card__thumb {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.ink-card__thumb--empty {
background: linear-gradient(135deg, #e4e4e7, #d4d4d8);
}
.ink-card__body {
padding: 1rem 1.1rem 1.15rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
flex: 1;
}
.ink-card__title {
font-family: "Fraunces", Georgia, serif;
font-size: 1.2rem;
margin: 0;
line-height: 1.25;
}
.ink-card__title a {
text-decoration: none;
color: var(--ink-ink);
}
.ink-card__title a:hover,
.ink-card__title a:focus-visible {
color: var(--ink-accent);
}
.ink-card .ink-meta {
color: #64748b;
}
.ink-card__excerpt {
margin: 0;
color: #475569;
font-size: 0.95rem;
line-height: 1.5;
} .ink-section-head {
margin-bottom: 1.25rem;
}
.ink-section-head--inline {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.ink-section-head__title {
font-family: "Fraunces", Georgia, serif;
font-size: clamp(1.5rem, 2.4vw, 2rem);
margin: 0;
}
.ink-section-head__kicker {
margin: 0.25rem 0 0;
color: #64748b;
font-size: 0.95rem;
}
.ink-section-head__link {
font-weight: 600;
color: var(--ink-accent);
text-decoration: none;
}
.ink-section-head__link:hover,
.ink-section-head__link:focus-visible {
text-decoration: underline;
} .ink-archive-header {
padding: 2.5rem 0 1.5rem;
}
.ink-archive-header__label {
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.72rem;
font-weight: 700;
color: var(--ink-accent);
margin: 0 0 0.35rem;
}
.ink-archive-header__title {
font-family: "Fraunces", Georgia, serif;
font-size: clamp(1.75rem, 3vw, 2.5rem);
margin: 0;
}
.ink-archive-header__desc {
margin-top: 0.75rem;
max-width: 65ch;
color: #475569;
} .ink-page__header {
padding: 2.5rem 0 1rem;
border-bottom: 1px solid var(--ink-line);
margin-bottom: 2rem;
}
.ink-page__title {
font-family: "Fraunces", Georgia, serif;
font-size: clamp(2rem, 3vw, 2.75rem);
margin: 0;
}
.ink-flow {
max-width: 680px;
margin: 0 auto 3rem;
}
.ink-flow > *:first-child {
margin-top: 0;
}
.ink-flow .alignwide {
max-width: 1240px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.ink-flow .alignfull {
max-width: none;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
} .ink-reading-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 0;
background: linear-gradient(90deg, var(--ink-accent), #06b6d4);
z-index: 60;
}
.ink-article__header {
padding: 2.5rem 0 1rem;
text-align: center;
max-width: 52rem;
margin: 0 auto;
}
.ink-article__header .ink-card__label {
display: block;
text-align: center;
}
.ink-article__meta {
text-align: center;
color: #64748b;
}
.ink-article__cover {
margin: 0 auto 2rem;
max-width: 1100px;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 18px 48px rgba(10, 15, 28, 0.12);
}
.ink-article__cover-img {
width: 100%;
height: auto;
display: block;
}
.ink-article__footer {
max-width: 680px;
margin: 2rem auto 0;
padding-top: 1.5rem;
border-top: 1px solid var(--ink-line);
color: #475569;
font-size: 0.95rem;
}
.ink-tags__label {
font-weight: 600;
margin-right: 0.25rem;
}
.ink-post-nav {
display: grid;
gap: 1rem;
padding: 2rem 0 3rem;
border-top: 1px solid var(--ink-line);
margin-top: 2rem;
}
@media (min-width: 700px) {
.ink-post-nav {
grid-template-columns: 1fr 1fr;
}
}
.post-navigation {
display: contents;
}
.post-navigation .nav-previous,
.post-navigation .nav-next {
margin: 0;
}
.post-navigation a {
display: block;
text-decoration: none;
padding: 1rem 1.1rem;
border: 1px solid var(--ink-line);
border-radius: 10px;
background: #fff;
color: var(--ink-ink);
}
.post-navigation a:hover,
.post-navigation a:focus-visible {
border-color: var(--ink-accent);
}
.ink-post-nav__label {
display: block;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-accent);
margin-bottom: 0.35rem;
}
.ink-post-nav__title {
font-family: "Fraunces", Georgia, serif;
font-size: 1.1rem;
} .navigation.pagination {
display: flex;
justify-content: center;
gap: 0.35rem;
margin-top: 2rem;
flex-wrap: wrap;
}
.navigation.pagination a,
.navigation.pagination span {
padding: 0.45rem 0.75rem;
border: 1px solid var(--ink-line);
border-radius: 6px;
text-decoration: none;
color: var(--ink-ink);
background: #fff;
}
.navigation.pagination .current {
border-color: var(--ink-accent);
color: var(--ink-accent);
font-weight: 600;
} .ink-404 {
padding: 4rem 0 5rem;
text-align: center;
}
.ink-404__eyebrow {
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 0.72rem;
font-weight: 700;
color: var(--ink-accent);
margin: 0 0 0.5rem;
}
.ink-404__title {
font-family: "Fraunces", Georgia, serif;
font-size: clamp(1.75rem, 3vw, 2.5rem);
margin: 0 0 0.75rem;
}
.ink-404__text {
color: #475569;
margin: 0 0 1.25rem;
}
.ink-search {
display: flex;
gap: 0.5rem;
justify-content: center;
margin-top: 1rem;
flex-wrap: wrap;
}
.ink-search__input {
min-width: min(420px, 100%);
padding: 0.65rem 0.85rem;
border-radius: 6px;
border: 1px solid var(--ink-line);
font: inherit;
}
.ink-search__submit {
padding: 0.65rem 1rem;
border-radius: 6px;
border: 1px solid var(--ink-accent);
background: var(--ink-accent);
color: #fff;
font-weight: 600;
cursor: pointer;
} .ink-widget__title {
font-family: "Fraunces", Georgia, serif;
font-size: 1.1rem;
margin: 0 0 0.75rem;
}
.ink-widget {
margin-bottom: 1.25rem;
}
.ink-mag__aside {
border: 1px solid var(--ink-line);
border-radius: 12px;
padding: 1rem 1.1rem;
background: #fff;
position: sticky;
top: 5.5rem;
} .ink-footer {
background: #0f172a;
color: #e2e8f0;
margin-top: 3rem;
}
.ink-footer__widgets {
padding: 2.5rem 0 1rem;
}
.ink-footer__grid {
display: grid;
gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.ink-footer .widget-title {
color: #f8fafc;
}
.ink-footer a {
color: #99f6e4;
}
.ink-footer__rule {
height: 2px;
background: linear-gradient(90deg, var(--ink-accent), #06b6d4);
}
.ink-footer__meta {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1.5rem;
justify-content: space-between;
padding: 1.25rem 0 2rem;
font-size: 0.85rem;
color: #94a3b8;
}
.ink-footer__copy,
.ink-footer__credit {
margin: 0;
} .ink-comments-wrap {
max-width: 680px;
margin: 0 auto;
padding-bottom: 3rem;
}
.ink-comments__title {
font-family: "Fraunces", Georgia, serif;
}
.ink-comments__list {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
}
.ink-comments__list .comment-body {
border: 1px solid var(--ink-line);
border-radius: 10px;
padding: 1rem;
margin-bottom: 0.75rem;
background: #fff;
}
.comment-reply-title,
.comments-title {
font-family: "Fraunces", Georgia, serif;
} .ink-latest {
padding: 2rem 0 4rem;
border-top: 1px solid var(--ink-line);
}
.ink-page-links {
margin-top: 2rem;
font-size: 0.95rem;
}
.ink-page-links__label {
font-weight: 600;
margin-right: 0.35rem;
}