.public-layout {
--color-hairline: oklch(91% 0.005 90);
--public-row: oklch(96.5% 0.004 106);
--public-row-hover: oklch(93.5% 0.005 106);
--public-panel: oklch(97% 0.003 106); /* solid card fill (B) */
--public-max-width: 64rem; /* help-center landing / standalone prose */
--public-home-width: 76rem; /* the page band: home masonry, the topbar, and the article layout share it so the brand never shifts between pages */
--public-reading: 46rem; /* the prose measure inside the article layout — kept narrow for legibility */
/* The team's brand colour, set per-site on (else this neutral). Every
accent role clamps lightness off it so any hex the team picks stays legible
with no runtime contrast decision — clamp only darkens the too-light end, so
a dark or vivid brand passes through unchanged. */
--brand: var(--color-armadillo-950);
--accent-ink: oklch(from var(--brand) min(l, 0.45) c h);
--on-accent-ink: var(--color-white);
/* The header is a full-bleed band: the accent colour, or a cover photo over it. */
--public-hero-bg: var(--accent-ink);
--public-hero-ink: var(--color-white);
--public-hero-ink-dim: oklch(86% 0.006 106);
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--color-white);
}
/* Full-bleed dark header. On the home it extends into a tall hero (the site
title is injected via `yield :hero`); on inner pages only the brand row shows,
so the hero is a modest dark strip. */
.public-layout__hero {
background: var(--public-hero-bg);
color: var(--public-hero-ink);
}
/* A cover photo takes the band; a bottom-weighted scrim keeps the title legible
on any image. The photo is a CSS var, never an ![]()
. */
.public-layout__hero--photo {
position: relative;
isolation: isolate;
background: var(--photo) center / cover;
}
.public-layout__hero--photo::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, rgb(20 18 14 / 0.15) 0%, rgb(20 18 14 / 0.72) 100%);
}
/* The +2·gutter keeps the hero's inner content aligned with the page content
below (which sits inside main's padding), at every width. */
.public-layout__hero-inner {
max-width: calc(var(--public-home-width) + 2 * var(--space-lg));
margin-inline: auto;
padding-inline: var(--space-lg);
}
.public-layout__brand-row {
padding-block: var(--space-lg) var(--space-md);
}
/* The home hero: the big site title over the dark band. */
.public-hero {
padding-block: clamp(0.5rem, 2vw, 1.5rem) clamp(2.5rem, 6vw, 4.5rem);
}
.public-hero__title {
font: 700 clamp(3rem, 6.5vw, 5rem)/0.98 var(--font-display);
letter-spacing: -0.045em;
color: var(--public-hero-ink);
}
.public-hero__intro {
margin-top: 1rem;
max-width: 40rem;
font: 400 clamp(1.05rem, 2vw, 1.3rem)/1.5 var(--font-display);
color: var(--public-hero-ink-dim);
}
.public-hero__intro p {
margin: 0;
}
.public-layout__brand {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
}
.public-layout__logo {
width: 1.5rem;
height: 1.5rem;
border-radius: var(--radius-sm);
object-fit: contain;
display: block;
}
.public-layout__wordmark {
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--public-hero-ink);
text-decoration: none;
}
a.public-layout__wordmark:hover,
a.public-layout__brand:hover .public-layout__wordmark {
color: var(--public-hero-ink-dim);
}
a.public-layout__brand {
text-decoration: none;
}
.public-layout__main {
flex: 1;
width: 100%;
padding: var(--space-2xl) var(--space-lg);
@media (min-width: 768px) {
padding: var(--space-3xl) var(--space-lg);
}
}
.public-collection,
.public-not-found,
.public-article {
max-width: 48rem;
margin-inline: auto;
}
.public-article-layout {
max-width: var(--public-home-width);
margin-inline: auto;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
}
/* Left-aligned in the page band so the sidebar shares the brand's left edge;
the reading column stays capped and the slack sits on the right. */
@media (min-width: 1024px) {
.public-article-layout {
grid-template-columns: 14rem minmax(0, var(--public-reading));
gap: var(--space-3xl);
justify-content: start;
}
}
.public-article-layout .public-article {
max-width: none;
margin: 0;
min-width: 0;
}
.public-layout__footer {
padding: var(--space-md) var(--space-lg) var(--space-lg);
text-align: center;
font-size: 0.75rem;
color: var(--color-armadillo-400);
}
.public-layout__footer-link {
color: var(--color-armadillo-600);
text-decoration: none;
font-weight: 500;
}
.public-layout__footer-link:hover {
color: var(--color-armadillo-800);
}
.public-layout__footer-logo {
width: 0.875rem;
height: 0.875rem;
vertical-align: -0.2em;
margin-right: 0.25rem;
display: inline-block;
}
/* Collection page header */
.public-collection__header {
margin-bottom: var(--space-xl);
padding-bottom: var(--space-xl);
border-bottom: 1px solid var(--color-hairline);
}
.public-collection__name {
font-size: clamp(2.25rem, 5vw, 3.5rem);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.035em;
color: var(--color-armadillo-900);
margin-bottom: var(--space-sm);
}
.public-collection__description {
font-size: 1.1875rem;
line-height: 1.6;
color: var(--color-armadillo-600);
margin-bottom: var(--space-lg);
}
.public-collection__intro {
font-size: 1.0625rem;
line-height: 1.6;
color: var(--color-armadillo-600);
}
.public-collection__intro p:last-child {
margin-bottom: 0;
}
.public-section__name:has(+ .public-collection__description) {
margin-bottom: var(--space-sm);
}
/* Article index (collection's list of articles) */
.public-article-index {
display: flex;
flex-direction: column;
}
.public-article-index__section {
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-armadillo-400);
margin: var(--space-lg) 0 var(--space-md);
}
.public-article-index__item {
display: block;
padding: var(--space-lg) 0;
border-bottom: 1px solid var(--color-hairline);
text-decoration: none;
color: inherit;
}
.public-article-index__item:first-child {
padding-top: 0;
}
.public-article-index__item:last-child {
border-bottom: 0;
}
.public-article-index__title {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.3;
color: var(--color-armadillo-900);
margin-bottom: var(--space-xs);
}
.public-article-index__item:hover .public-article-index__title {
text-decoration: underline;
text-underline-offset: 0.15em;
}
.public-article-index__preview {
font-size: 0.9375rem;
line-height: 1.5;
color: var(--color-armadillo-500);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Sections (public) */
.public-section {
margin-top: var(--space-2xl);
}
.public-section__name {
font-size: 1.875rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--color-armadillo-900);
margin-bottom: var(--space-lg);
}
/* Help Center landing (category cards) */
.public-help-center {
max-width: var(--public-max-width);
margin-inline: auto;
}
.public-help-center__hero {
text-align: center;
margin-bottom: var(--space-2xl);
}
.public-help-center__title {
font-size: clamp(1.875rem, 6vw, 2.5rem);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-armadillo-900);
}
.public-help-center__cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
gap: var(--space-lg);
}
.public-help-center__card {
display: flex;
flex-direction: column;
gap: var(--space-xs);
padding: var(--space-xl);
border: 1px solid var(--color-hairline);
border-radius: var(--radius-lg);
text-decoration: none;
color: inherit;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.public-help-center__card:hover {
border-color: var(--color-armadillo-300);
box-shadow: var(--shadow-sm);
}
.public-help-center__card-name {
font-size: 1.1875rem;
font-weight: 700;
color: var(--color-armadillo-900);
}
.public-help-center__card-desc {
font-size: 0.9375rem;
line-height: 1.5;
color: var(--color-armadillo-600);
}
.public-help-center__card-count {
margin-top: var(--space-xs);
font-size: 0.8125rem;
color: var(--color-armadillo-500);
}
/* Article page */
.public-breadcrumb {
margin-bottom: var(--space-xl);
}
.public-breadcrumb__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
font-size: 0.875rem;
line-height: 1.4;
}
.public-breadcrumb__item {
display: inline-flex;
align-items: center;
min-width: 0;
}
.public-breadcrumb__item:not(:first-child)::before {
content: "\203A"; /* › */
margin-inline: var(--space-xs);
color: var(--color-armadillo-300);
}
.public-breadcrumb__link {
color: var(--color-armadillo-500);
text-decoration: none;
transition: color var(--transition-fast);
}
.public-breadcrumb__link:hover {
color: var(--color-armadillo-800);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.public-breadcrumb__current {
color: var(--color-armadillo-700);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.public-article__header {
margin-bottom: var(--space-xl);
}
.public-article__title {
font-size: clamp(2.25rem, 5vw, 3.5rem);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.035em;
color: var(--color-armadillo-900);
}
.public-article__description {
font-size: 1.1875rem;
color: var(--color-armadillo-600);
line-height: 1.5;
margin-top: var(--space-md);
}
.public-article__body {
font-size: 1.125rem;
line-height: 1.75;
color: var(--color-armadillo-800);
}
/* The restrained brand accent on prose links. Scoped under .public-layout so it
outranks the global `body.public-layout a` ink rule in base.css (hover too). */
.public-layout .public-article__body a,
.public-layout .public-collection__description a,
.public-layout .public-collection__intro a,
.public-layout .public-article__body a:hover,
.public-layout .public-collection__description a:hover,
.public-layout .public-collection__intro a:hover {
color: var(--accent-ink);
}
.public-article__body a,
.public-collection__description a,
.public-collection__intro a {
text-decoration: underline;
text-underline-offset: 0.15em;
text-decoration-thickness: 1px;
}
.public-article__body a:hover,
.public-collection__description a:hover,
.public-collection__intro a:hover {
text-decoration-thickness: 2px;
}
/* Sidebar table of contents — desktop only for now; mobile relies on the back link + prev/next */
.public-toc {
display: none;
}
@media (min-width: 1024px) {
.public-toc {
display: block;
font-size: 0.9375rem;
position: sticky;
top: var(--space-lg);
align-self: start;
max-height: calc(100vh - 2 * var(--space-lg));
overflow-y: auto;
}
}
/* Mobile TOC disclosure (< 1024px). A native wraps the tree so the
whole collection stays navigable on a phone without any JS. At >= 1024px the
real .public-toc sidebar takes over and this disclosure becomes a transparent
passthrough: no border, summary hidden, content always shown. */
.public-toc-disclosure {
border: 1px solid var(--color-hairline);
border-radius: var(--radius-md);
}
.public-toc-disclosure__summary {
display: flex;
align-items: center;
gap: var(--space-sm);
min-height: 2.75rem; /* >= 44px touch target */
padding: var(--space-sm) var(--space-md);
cursor: pointer;
list-style: none;
color: var(--color-armadillo-700);
line-height: 1.3;
}
.public-toc-disclosure__summary::-webkit-details-marker {
display: none;
}
/* The label sits between a leading list-icon and the trailing chevron. It reads
" / " so the collapsed state still tells the
reader where they are. */
.public-toc-disclosure__label {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.public-toc-disclosure__eyebrow {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-armadillo-400);
}
.public-toc-disclosure__current {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-armadillo-900);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.public-toc-disclosure__icon {
flex-shrink: 0;
display: inline-flex;
color: var(--color-armadillo-400);
}
.public-toc-disclosure__chevron {
flex-shrink: 0;
display: inline-flex;
color: var(--color-armadillo-400);
transition: transform var(--transition-fast);
}
.public-toc-disclosure[open] .public-toc-disclosure__chevron {
transform: rotate(180deg);
}
/* When open, the tree gets a hairline separator and its own padding. The inner
.public-toc is force-shown here (it is display:none by default below 1024px). */
.public-toc-disclosure[open] .public-toc {
display: block;
padding: 0 var(--space-md) var(--space-sm);
border-top: 1px solid var(--color-hairline);
margin-top: 0;
}
.public-toc-disclosure[open] .public-toc .public-toc__heading:first-of-type {
margin-top: var(--space-md);
}
/* Browsable accordion (Docs, < 1024px). Inside the disclosure, each collection is
its own nested native so a full space tree reads as a short list of
tappable collection rows instead of one long scroll wall. The collection holding
the current article is rendered [open]. Zero JS — nested only. At
>= 1024px the toggles flatten (see media query below) so the desktop sidebar is
the same always-expanded tree it is today. */
.public-toc__collection {
border-top: 1px solid var(--color-hairline);
}
.public-toc__collection:first-of-type {
border-top: 0;
}
.public-toc__collection-toggle {
display: flex;
align-items: center;
gap: var(--space-sm);
min-height: 2.75rem; /* >= 44px touch target */
padding: var(--space-xs) 0;
cursor: pointer;
list-style: none;
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-armadillo-900);
line-height: 1.3;
}
.public-toc__collection-toggle::-webkit-details-marker {
display: none;
}
.public-toc__collection-name {
flex: 1;
min-width: 0;
}
.public-toc__collection-caret {
flex-shrink: 0;
display: inline-flex;
color: var(--color-armadillo-400);
transition: transform var(--transition-fast);
}
.public-toc__collection[open] .public-toc__collection-caret {
transform: rotate(90deg);
}
/* The collection containing the current article keeps a quiet "you are here"
marker on its row, so even if the reader collapses it the row still says the
active article lives inside. Armadillo, never --color-primary. */
.public-toc__collection-toggle--current {
border-left: 2px solid var(--color-armadillo-900);
margin-left: calc(var(--space-sm) * -1);
padding-left: var(--space-sm);
}
@media (min-width: 1024px) {
/* Desktop: the accordion flattens to the same always-expanded tree as today.
Toggles render as plain headings; every collection's body is shown. */
.public-toc__collection {
border-top: 0;
}
.public-toc__collection-toggle {
min-height: 0;
padding: 0;
margin: var(--space-lg) 0 var(--space-xs);
cursor: default;
pointer-events: none;
}
.public-toc__collection-toggle--current {
border-left: 0;
margin-left: 0;
padding-left: 0;
}
.public-toc__collection-caret {
display: none;
}
.public-toc__collection-body {
display: block;
}
}
@media (min-width: 1024px) {
.public-toc-disclosure {
border: 0;
border-radius: 0;
position: sticky;
top: var(--space-lg);
align-self: start;
}
.public-toc-disclosure__summary {
display: none;
}
/* Summary is hidden here, so the disclosure can't be toggled; modern engines hide
a closed 's content via ::details-content, so force it visible there. */
.public-toc-disclosure::details-content {
content-visibility: visible;
}
.public-toc-disclosure .public-toc {
display: block;
padding: 0;
border-top: 0;
max-height: calc(100vh - 2 * var(--space-lg));
overflow-y: auto;
}
}
/* Docs mobile drawer */
.public-toc-drawer__trigger {
display: flex;
align-items: center;
gap: var(--space-sm);
width: 100%;
min-height: 2.75rem;
margin-bottom: var(--space-xl);
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--color-hairline);
border-radius: var(--radius-md);
background: var(--color-white);
cursor: pointer;
color: var(--color-armadillo-700);
line-height: 1.3;
text-align: left;
font: inherit;
}
.public-toc-drawer__trigger-icon {
flex-shrink: 0;
display: inline-flex;
color: var(--color-armadillo-400);
}
.public-toc-drawer__trigger-label {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.public-toc-drawer__trigger-eyebrow {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-armadillo-400);
}
.public-toc-drawer__trigger-current {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-armadillo-900);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.public-toc-drawer {
width: 100%;
max-width: none;
height: 100%;
max-height: none;
inset: 0;
margin: 0;
padding: 0;
border: 0;
background: var(--color-white);
}
.public-toc-drawer::backdrop {
background: rgb(0 0 0 / 0.3);
}
html:has(.public-toc-drawer[open]) {
overflow: hidden;
}
.public-toc-drawer__panel {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.public-toc-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
flex-shrink: 0;
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--color-hairline);
}
.public-toc-drawer__title {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-armadillo-400);
}
.public-toc-drawer__close {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.75rem;
min-width: 2.75rem;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
color: var(--color-armadillo-600);
}
.public-toc-drawer__close:hover {
color: var(--color-armadillo-900);
}
.public-toc-drawer__close-icon {
display: inline-flex;
font-size: 1rem;
}
.public-toc-drawer__body {
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--space-md) var(--space-md) var(--space-lg);
}
.public-toc-drawer__body .public-toc {
display: block;
}
@media (min-width: 1024px) {
.public-toc-drawer__trigger {
display: none;
}
}
.public-toc__heading {
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-armadillo-900);
margin: var(--space-lg) 0 var(--space-xs);
}
.public-toc__heading:first-of-type {
margin-top: var(--space-sm);
}
.public-toc__section {
margin: var(--space-sm) 0 var(--space-2xs);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-armadillo-400);
}
.public-toc__list {
list-style: none;
margin: 0 0 var(--space-md);
padding: 0;
display: flex;
flex-direction: column;
}
.public-toc__link {
display: block;
padding: var(--space-xs) 0 var(--space-xs) var(--space-sm);
margin-left: calc(var(--space-sm) * -1);
color: var(--color-armadillo-700);
text-decoration: none;
line-height: 1.4;
border-left: 2px solid transparent;
}
.public-toc__link:hover {
color: var(--color-armadillo-900);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.public-layout .public-toc__link--current,
.public-layout .public-toc__link--current:hover {
color: var(--accent-ink);
border-left-color: var(--accent-ink);
font-weight: 600;
}
/* Inline prev / next at end of article */
.public-prev-next {
margin-top: var(--space-2xl);
padding-top: var(--space-xl);
border-top: 1px solid var(--color-hairline);
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
}
.public-prev-next__link {
display: flex;
flex-direction: column;
gap: 0.125rem;
text-decoration: none;
color: var(--color-armadillo-700);
padding: var(--space-sm) 0;
}
.public-prev-next__link:hover {
color: var(--color-armadillo-900);
}
.public-prev-next__link:hover .public-prev-next__title {
text-decoration: underline;
text-underline-offset: 0.15em;
}
.public-prev-next__link--prev {
align-items: flex-start;
text-align: left;
}
.public-prev-next__link--next {
align-items: flex-start;
text-align: left;
}
@media (min-width: 768px) {
.public-prev-next {
grid-template-columns: 1fr 1fr;
}
.public-prev-next__link--next {
align-items: flex-end;
text-align: right;
grid-column: 2;
}
}
.public-prev-next__caption {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-armadillo-500);
}
.public-prev-next__title {
font-size: 1rem;
font-weight: 600;
color: inherit;
}
/* 404 */
.public-not-found {
text-align: center;
padding: var(--space-2xl) 0;
}
.public-not-found__icon {
font-size: 2rem;
color: var(--color-armadillo-400);
margin-bottom: var(--space-md);
}
.public-not-found__title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-armadillo-900);
margin-bottom: var(--space-sm);
}
.public-not-found__description {
color: var(--color-armadillo-600);
}
/* ─── Published site home ────────────────────────────────────────────────────
Reuses the app's masonry (.tile-grid), cards (.tile) and article rows (.row),
recoloured for the white public ground: hairline-defined cards, the neutral
armadillo text scale, light-grey rows, no brand hue, no dates. */
.public-home {
max-width: var(--public-home-width);
margin-inline: auto;
}
/* B: cards are solid neutral panels (no hairline), article rows are white wells
inside them, collection titles are big. Neutral — no brand hue. */
.public-layout .tile {
border: 0;
background: var(--public-panel);
color: var(--color-armadillo-900);
}
.public-layout .tile__name {
font-size: clamp(1.75rem, 3vw, 2.375rem);
letter-spacing: -0.035em;
color: var(--color-armadillo-900);
}
.public-layout .tile__desc {
color: var(--color-armadillo-700);
}
.public-layout .row {
background: var(--color-white);
color: var(--color-armadillo-900);
text-decoration: none;
transition: box-shadow var(--transition-fast), background var(--transition-fast);
&:hover {
background: var(--color-white);
box-shadow: 0 2px 10px -4px rgba(20, 18, 14, 0.18);
color: var(--color-armadillo-900);
}
}
.public-layout .row__dot {
background: var(--color-armadillo-900);
}
.public-layout .row__title {
color: var(--color-armadillo-900);
}