- Camera
- Leica M6
- Lens
- Summicron 35mm f/2
- Film
- Kodak Tri-X 400
- Lab
- Self-processed in D-76
"Technical Details" heading is injected via ::before to avoid
editor repetition. Number of rows is unrestricted.
---------------------------------------- */
.article-body .technical-details {
background-color: rgba(230, 227, 223, 0.2);
border: 1px solid rgba(26, 24, 22, 0.12);
padding: 25px;
margin: var(--space-8) 0;
}
.article-body .technical-details::before {
content: "Technical Details";
display: block;
font-family: var(--font-mono);
font-weight: 600;
font-size: 14px;
line-height: 1.75;
letter-spacing: 1.344px;
color: rgba(26, 24, 22, 0.7);
text-transform: uppercase;
margin-bottom: var(--space-4);
}
.article-body .technical-details dl {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.article-body .technical-details dl > div {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 8px 0 9px;
border-bottom: 1px solid rgba(26, 24, 22, 0.12);
}
.article-body .technical-details dl > div:last-child {
border-bottom: none;
padding-bottom: 8px;
}
.article-body .technical-details dt {
font-family: var(--font-mono);
font-weight: 400;
font-size: 17px;
line-height: 1.42;
color: rgba(26, 24, 22, 0.6);
}
.article-body .technical-details dd {
font-family: var(--font-mono);
font-weight: 400;
font-size: 17px;
line-height: 1.42;
color: var(--gp-text);
margin: 0;
text-align: right;
}
/* Markdown tables, published as an HTML card. The treatment follows the
Technical Details card beside it -- tinted panel, hairline rows, mono type at
the same size -- because both are specification rather than prose, and two
different table looks in one article would read as two systems. The wrapper
scrolls rather than the page, so a wide table on a phone stays inside the
reading column instead of pushing the whole document sideways. */
.article-body .gp-table {
background-color: rgba(230, 227, 223, 0.2);
border: 1px solid rgba(26, 24, 22, 0.12);
padding: 25px;
/* A table sits in the flow of the argument rather than interrupting it, so
the space around it is a paragraph break, not a card's. Grid items do not
collapse margins, so the top is left to the preceding paragraph's own 24px
and only the bottom is declared -- otherwise the two would stack to 48px
above and read as double-spaced. */
margin: 0 0 var(--space-5);
overflow-x: auto;
}
.article-body .gp-table table {
width: 100%;
border-collapse: collapse;
}
.article-body .gp-table th,
.article-body .gp-table td {
font-family: var(--font-mono);
font-weight: 400;
font-size: 17px;
line-height: 1.42;
text-align: left;
padding: 8px var(--space-5) 9px 0;
border-bottom: 1px solid rgba(26, 24, 22, 0.12);
vertical-align: baseline;
}
.article-body .gp-table th:last-child,
.article-body .gp-table td:last-child {
padding-right: 0;
}
/* The header names the columns, so it takes the muted weight the Technical
Details labels carry, with the rule beneath it doing the separating. */
.article-body .gp-table th {
color: rgba(26, 24, 22, 0.6);
text-transform: uppercase;
letter-spacing: 1.344px;
font-size: 14px;
font-weight: 600;
}
.article-body .gp-table td {
color: var(--gp-text);
}
.article-body .gp-table tbody tr:last-child td {
border-bottom: none;
padding-bottom: 8px;
}
.article-body .gp-table__cell--center {
text-align: center;
}
.article-body .gp-table__cell--right {
text-align: right;
}
/* ----------------------------------------
Article end mark — GP
Injected automatically by post.hbs after {{content}}.
Renders as a final inline typographic mark below the last paragraph.
---------------------------------------- */
.article-end-mark {
display: inline;
font-family: var(--font-body);
font-weight: 800;
font-size: 22px;
line-height: inherit;
text-transform: uppercase;
color: var(--gp-text);
margin-left: var(--space-2);
}
/* ============================================================
SECTION / ARCHIVE TEMPLATE — tag.hbs
============================================================ */
/* ----------------------------------------
Section hero
Full-width header with kicker, large title, description
and 2px rule beneath. Matches Figma Version 3 section pages.
---------------------------------------- */
.section-hero {
border-bottom: 2px solid var(--gp-text);
/* Top padding matches .issue-hero (Podcast family) so Department and
Member Work mastheads start on the same vertical axis as Podcast. */
padding: var(--space-6) 0 var(--space-7);
}
/* ----------------------------------------
Shared centred masthead family
Confluence defines .section-hero (Department/tag, Film & Formats, author,
Member Work) and .issue-hero (standard Pages, Current Issue, Archive,
Topics, Search, Podcast) as ONE centred editorial family. The geometry and
typography they genuinely share are declared once here; each family keeps
only what actually differs, below. Member Work's wide hero and the Zones
hero remain approved variants that opt out of the centred inner.
---------------------------------------- */
.section-hero__inner,
.issue-hero__inner {
max-width: 790px;
margin-left: auto;
margin-right: auto;
}
/* Masthead title: holds its desktop size to ~900px, then scales for fit
rather than miniaturisation, with a floor that keeps the opening statement
substantial on a phone and clears the measured clipping at 430. Tracking is
in em so it stays proportional at every size.
CORRECTION PASS: the whole clamp comes down ~9% (72->66, 8vw->7.3vw,
38->35) so the masthead sits calmly over the larger body scale. The
three-part responsive relationship is scaled, not replaced. */
.section-hero__title,
.issue-hero__title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(35px, 7.3vw, 66px);
line-height: 0.95;
letter-spacing: -0.025em;
color: var(--gp-text);
margin: 0;
}
.section-hero__kicker,
.issue-hero__kicker {
display: block;
font-family: var(--font-mono);
font-weight: 400;
font-size: 14px;
line-height: 1.5;
text-transform: uppercase;
margin: 0 0 var(--space-5) 0;
}
/* Masthead deck: holds 22px to ~956px, where the measurement pass showed
line count starting to climb (3 -> 4 -> 6 lines by 670px), then eases to a
17px floor. Combined with the wider content the responsive margin returns,
this keeps the deck from degrading into a paragraph block. */
.section-hero__desc,
.issue-hero__deck {
font-family: var(--font-body);
font-weight: 400;
font-size: clamp(19px, 2.1vw, 24px);
line-height: 1.5;
color: rgba(26, 24, 22, 0.85);
}
/* Family-specific: kicker tracking/colour and deck rhythm differ between the
two mastheads in the approved desktop design. */
.section-hero__kicker {
letter-spacing: 1.5px;
color: rgba(26, 24, 22, 0.5);
}
.section-hero__desc {
margin: var(--space-5) 0 0 0;
max-width: 680px;
}
/* ----------------------------------------
Member Work hero
A centred masthead with a rail attached to its right. The editorial
column is anchored to the same 790px axis .section-hero__inner and
.issue-hero__inner (Podcast) centre on, so Member Work opens on the
identical x-position as every other masthead; the rail then hangs off
to its right rather than defining a wider frame of its own.
Columns: 540 editorial + 48 + 1px rule + 48 + 340 rail = 977.
At 1440 that runs x=325 → 1302.
Only /member-work/ opts in — the rail and the anchor are scoped here,
while typography and vertical rhythm come from the shared .section-hero
family, which is what keeps the two consistent.
---------------------------------------- */
.member-work-hero {
/* Derived from the 790px masthead block rather than hardcoded, so the
editorial column tracks .section-hero__inner automatically if that
width ever changes. Reset to 0 in the 1080px query below. */
padding-left: calc((100% - 790px) / 2);
display: grid;
grid-template-columns: minmax(0, 540px) 1px 340px;
gap: 0 var(--space-7);
align-items: start;
}
.member-work-hero__main .section-hero__desc {
max-width: 540px;
}
.member-work-hero__divider {
align-self: stretch;
background-color: rgba(26, 24, 22, 0.12);
}
/* ----------------------------------------
Next Theme rail
Editorial callout for the open submission Theme.
Content is editable in Ghost: title and description from the
/member-photo/ Page, deadline from @custom.next_theme_deadline.
---------------------------------------- */
.next-theme {
background-color: rgba(107, 112, 87, 0.08);
border: 1px solid rgba(107, 112, 87, 0.3);
padding: 40px;
}
.next-theme__eyebrow {
display: block;
font-size: 14px;
letter-spacing: 1.5px;
border-bottom: 1px solid rgba(107, 112, 87, 0.3);
padding-bottom: var(--space-3);
margin-bottom: var(--space-5);
}
.next-theme__title {
font-family: var(--font-display);
font-weight: 600;
font-size: 32px;
line-height: 1.2;
letter-spacing: -0.28px;
color: var(--gp-text);
margin: 0;
}
.next-theme__desc {
font-family: var(--font-body);
font-weight: 400;
font-size: 19px;
line-height: 1.55;
color: rgba(26, 24, 22, 0.75);
margin: var(--space-4) 0 0 0;
}
.next-theme__deadline {
display: block;
font-size: 14px;
letter-spacing: 1.5px;
margin: var(--space-6) 0 0 0;
}
.next-theme__cta {
display: inline-block;
font-family: var(--font-mono);
font-weight: 500;
font-size: 14px;
line-height: 1;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--gp-text);
text-decoration: none;
border-bottom: 1px solid var(--gp-accent);
padding-bottom: var(--space-2);
margin-top: var(--space-5);
}
.next-theme__cta:hover {
opacity: 0.75;
}
.next-theme__cta:focus-visible {
outline: 2px solid var(--gp-text);
outline-offset: 3px;
}
/* Stack the rail below the editorial column at the existing 1080px
breakpoint, where the two-column hero stops fitting cleanly. */
@media (max-width: 1080px) {
.gp-accent-card-grid--4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.member-work-hero {
padding-left: 0;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-7) 0;
}
.member-work-hero__divider {
display: none;
}
.next-theme {
width: 100%;
max-width: 340px;
}
}
/* ----------------------------------------
Section archive wrapper
Vertical padding around all post layouts
---------------------------------------- */
.section-archive {
padding: var(--space-8) 0 var(--space-10);
}
.section-archive__empty {
font-family: var(--font-body);
font-style: italic;
font-size: 21px;
color: rgba(26, 24, 22, 0.55);
padding: var(--space-9) 0;
margin: 0;
}
/* ----------------------------------------
Section lead — image-led (culture / reviews / practice)
Side-by-side image + text on desktop; stacks on mobile
---------------------------------------- */
.section-lead {
display: flex;
gap: var(--space-6);
align-items: flex-start;
padding-bottom: var(--space-8);
border-bottom: 1px solid rgba(26, 24, 22, 0.12);
margin-bottom: var(--space-7);
}
.section-lead--text-only {
display: block;
}
.section-lead__image {
flex: 0 0 58%;
max-width: 58%;
}
.section-lead__body {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-3);
padding-top: var(--space-2);
}
.section-lead__label {
font-family: var(--font-mono);
font-weight: 400;
font-size: 14px;
line-height: 1.5;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--gp-text-muted);
}
.section-lead__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 52px;
line-height: 1.05;
letter-spacing: -0.96px;
color: var(--gp-text);
text-decoration: none;
display: block;
}
.section-lead__title:hover {
opacity: 0.75;
}
.section-lead__deck {
font-family: var(--font-body);
font-weight: 400;
font-size: 23px;
line-height: 1.55;
color: rgba(26, 24, 22, 0.85);
margin: 0;
}
.section-lead__meta {
font-family: var(--font-mono);
font-weight: 400;
font-size: 15px;
line-height: 1.5;
color: rgba(26, 24, 22, 0.55);
margin: 0;
}
.section-lead__sep {
color: rgba(26, 24, 22, 0.35);
}
/* ----------------------------------------
Section secondary — 3-across cards
Olive left border; image above, meta below
---------------------------------------- */
.section-secondary {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
margin-bottom: var(--space-8);
}
.section-secondary:empty {
display: none;
}
.section-secondary__item {
display: flex;
flex-direction: column;
}
.section-secondary__image {
display: block;
}
.section-secondary__body {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-4);
border-left: 4px solid rgba(107, 112, 87, 0.7);
background: rgba(230, 227, 223, 0.08);
}
.section-secondary__label {
font-family: var(--font-mono);
font-weight: 400;
font-size: 14px;
line-height: 1.5;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--gp-text-muted);
}
.section-secondary__title {
font-family: var(--font-display);
font-weight: 600;
font-size: 30px;
line-height: 1.3;
letter-spacing: -0.26px;
color: var(--gp-text);
text-decoration: none;
display: block;
}
.section-secondary__title:hover {
opacity: 0.75;
}
.section-secondary__date {
font-family: var(--font-mono);
font-weight: 400;
font-size: 15px;
line-height: 1.5;
color: rgba(26, 24, 22, 0.55);
margin-top: auto;
}
/* ----------------------------------------
Shared archive card family — responsive
.section-lead and .section-secondary are the reusable archive composition
used by Department/tag, Film & Formats, author and the Member Work
selections partial. Both keep their approved desktop hierarchy; only the
track count and the lead's axis change, at the widths the measurement pass
showed each becoming implausible.
Secondary cards: three across hold usable width down to ~900, where they
fall below 200px; two across then hold to ~540. Deliberately plain,
unscoped rules, so the later Member Work stage can override the phone
presentation with a scoped selector without fighting specificity here.
Lead story: the image is a fixed 58% of the row, so the editorial column is
what fails first. It stacks at the top of the measured single-column band
rather than being carried down to the point where the text column is
unreadable. Image prominence is preserved by giving it the full width.
---------------------------------------- */
@media (max-width: 900px) {
.section-secondary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.section-lead {
display: block;
}
.section-lead__image {
max-width: none;
margin-bottom: var(--space-5);
}
}
@media (max-width: 540px) {
.section-secondary {
grid-template-columns: minmax(0, 1fr);
}
}
/* ----------------------------------------
Member Work selected photographs — narrow presentation
Scoped to .member-work-selections, which member-work.hbs and
member-work-theme.hbs put on the shared selections wrapper. Ghost's
body_class cannot carry this: it is empty on /member-work/themes/ and on
/member-work/ it depends on the current Theme tag, so a stable hook has to
come from the templates.
The shared card system collapses .section-secondary to one column at 540,
which for Member Work would render the primary photograph and every
remaining selection at identical full-container width and destroy the
primary/secondary hierarchy the Theme pages are required to keep. 540 is
therefore the width at which Member Work has to diverge, and the locked
phone treatment is what restores the hierarchy: the primary goes to full
viewport width at its complete aspect ratio, and the remaining selections
stay two across.
Complete aspect matters here in particular. Three of the four live
selections are portrait (0.67 to 0.99), so the 3:2 card box shows as little
as 45% of the frame; on a dedicated Theme page the photograph is the
content, not a card thumbnail.
The pull-out uses the page margin rather than a viewport unit, so it lands
exactly on the viewport edge and cannot add document width.
---------------------------------------- */
@media (max-width: 540px) {
.member-work-selections .section-lead__image {
/* Complete frame: drop the 3:2 box and let the image set its own height. */
aspect-ratio: auto;
/* Full viewport width: deliberate, not accidental overflow. */
width: auto;
max-width: none;
margin-left: calc(-1 * var(--page-margin-fluid));
margin-right: calc(-1 * var(--page-margin-fluid));
}
.member-work-selections .section-lead__image img {
height: auto;
object-fit: fill;
}
/* Locked: the remaining selections stay two across on phone rather than
following the shared collapse to one. */
.member-work-selections .section-secondary {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-5);
}
/* Two across at 360 leaves a 144px card, and the desktop 26px title with
16px of padding left only ~108px of text — three lines for a short title.
The photographs are the locked part of this rule, so the metadata around
them is what gives: the smallest adjustment that keeps the caption
readable without touching the grid. */
.member-work-selections .section-secondary__body {
padding: var(--space-3);
}
.member-work-selections .section-secondary__title {
font-size: 24px;
line-height: 1.25;
}
}
/* The shared Member Work selection presentation walks positions 01-20 and asks
the collection for each one, so it cannot know in advance which positions a
Theme filled. Both group containers are therefore emitted unconditionally and
an unused one collapses: .section-secondary through the existing :empty rule,
and the More list here, because its own "More" heading is a child and would
otherwise keep the container non-empty. Scoped to Member Work — the shared
card system and the homepage are untouched. */
.member-work-selections .section-list:not(:has(.news-row)) {
display: none;
}
/* ----------------------------------------
Section list — compact grid below secondary
"More" heading + archive rows
---------------------------------------- */
.section-list {
display: flex;
flex-direction: column;
}
.section-list:empty {
display: none;
}
.section-list__heading {
font-family: var(--font-mono);
font-weight: 400;
font-size: 14px;
line-height: 1.5;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(26, 24, 22, 0.45);
border-bottom: 1px solid rgba(26, 24, 22, 0.12);
padding-bottom: var(--space-3);
margin: 0 0 0 0;
}
/* ----------------------------------------
Section news lead panel — news / podcast
Accent-tinted card for the top story
---------------------------------------- */
.section-news-lead {
display: flex;
flex-direction: column;
gap: var(--space-3);
background: rgba(230, 227, 223, 0.18);
border-left: 4px solid var(--gp-accent);
padding: var(--space-7) var(--space-7) var(--space-7) var(--space-10);
margin-bottom: var(--space-8);
}
.section-news-lead__label {
font-family: var(--font-mono);
font-weight: 400;
font-size: 14px;
line-height: 1.5;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--gp-text-muted);
}
.section-news-lead__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 64px;
line-height: 1;
letter-spacing: -1.2px;
color: var(--gp-text);
text-decoration: none;
display: block;
}
.section-news-lead__title:hover {
opacity: 0.75;
}
.section-news-lead__deck {
font-family: var(--font-body);
font-weight: 400;
font-size: 22px;
line-height: 1.55;
color: rgba(26, 24, 22, 0.85);
margin: 0;
max-width: var(--reading-measure);
}
.section-news-lead__meta {
font-family: var(--font-mono);
font-weight: 400;
font-size: 15px;
line-height: 1.5;
color: rgba(26, 24, 22, 0.55);
margin: 0;
}
.section-news-lead__sep {
color: rgba(26, 24, 22, 0.35);
}
/* ----------------------------------------
Section news list
Archive row list with deck visible
---------------------------------------- */
.section-news-list {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.section-news-list .news-row__deck {
display: block;
}
/* ----------------------------------------
Pagination
Page nav below post lists
---------------------------------------- */
.pagination {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid rgba(26, 24, 22, 0.12);
padding: var(--space-6) var(--canvas-margin);
}
.pagination-prev,
.pagination-next {
font-family: var(--font-mono);
font-weight: 500;
font-size: 16px;
line-height: 1.48;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--gp-accent);
text-decoration: none;
}
.pagination-prev:hover,
.pagination-next:hover {
opacity: 0.75;
}
.pagination-info {
font-family: var(--font-mono);
font-weight: 400;
font-size: 16px;
line-height: 1.48;
color: rgba(26, 24, 22, 0.5);
}
/* ============================================================
CURRENT ISSUE TEMPLATE — custom-current-issue.hbs
============================================================ */
/* ----------------------------------------
Issue page grid
1200px content width (120px margins at 1440px) — same as homepage grid.
Applied to both the hero and content containers.
---------------------------------------- */
/* ----------------------------------------
Issue hero
Kicker + title + deck, 2px rule beneath.
Kicker sourced from page Meta Title field in Ghost Admin.
---------------------------------------- */
.issue-hero {
padding: var(--space-6) 0 var(--space-5);
}
/* Issue-family specifics; shared geometry/typography is in the centred
masthead family block above. */
.issue-hero__inner {
border-bottom: 2px solid var(--gp-text);
padding-bottom: var(--space-7);
}
.issue-hero__kicker {
letter-spacing: 1.68px;
color: var(--gp-text-muted);
}
.issue-hero__deck {
margin: var(--space-6) 0 0 0;
}
.issue-hero__actions {
margin-top: var(--space-7);
}
/* ----------------------------------------
Issue contents wrapper
---------------------------------------- */
.issue-contents {
padding: var(--space-6) 0 var(--space-10);
}
/* ----------------------------------------
Shared label link styling
Public tag labels link to their archives.
---------------------------------------- */
.issue-label-link {
color: inherit;
text-decoration: none;
}
.issue-label-link:hover {
text-decoration: underline;
}
/* ----------------------------------------
Lead story card (post 1)
Image left 55%, body right 45%.
White bg with panel border.
---------------------------------------- */
.issue-lead {
display: flex;
flex-direction: row;
background: #fff;
border: 1px solid var(--gp-panel);
min-height: 480px;
margin-bottom: var(--space-8);
}
.issue-lead__image {
flex: 0 0 55%;
width: 55%;
}
.issue-lead--text-only .issue-lead__body {
padding: var(--space-8);
}
.issue-lead__body {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--space-8) 56px;
gap: var(--space-3);
}
.issue-lead__eyebrow {
display: flex;
align-items: center;
gap: var(--space-2);
}
.issue-lead__label {
font-family: var(--font-mono);
font-weight: 400;
font-size: 14px;
line-height: 1.5;
letter-spacing: 2.2px;
text-transform: uppercase;
color: var(--gp-text-muted);
}
.issue-lead__review {
font-family: var(--font-mono);
font-weight: 400;
font-size: 14px;
line-height: 1.5;
letter-spacing: 2.2px;
text-transform: uppercase;
color: var(--gp-text-muted);
}
.issue-lead__title {
font-family: var(--font-display);
font-weight: 600;
font-size: 40px;
line-height: 1.15;
letter-spacing: -0.9px;
color: var(--gp-text);
text-decoration: none;
display: block;
}
.issue-lead__title:hover {
opacity: 0.75;
}
.issue-lead__deck {
font-family: var(--font-body);
font-weight: 400;
font-size: 20px;
line-height: 1.55;
color: rgba(26, 24, 22, 0.55);
margin: 0;
}
.issue-lead__meta {
font-family: var(--font-display);
font-weight: 400;
font-size: 16px;
color: rgba(26, 24, 22, 0.55);
margin: 0;
}
.issue-lead__sep {
color: rgba(26, 24, 22, 0.3);
}
/* ----------------------------------------
"In This Issue" section heading
---------------------------------------- */
.issue-section-heading {
font-family: var(--font-display);
font-weight: 600;
font-size: 36px;
line-height: 1.5;
letter-spacing: -0.8px;
color: var(--gp-text);
margin: 0 0 var(--space-7) 0;
}
/* ----------------------------------------
2-across image grid (posts 2–3)
---------------------------------------- */
.issue-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
margin-bottom: var(--space-6);
}
/* Two across held usable tracks down to 296px at 768; below the shared 760
threshold they fall to 249px and the card title runs to four lines and
beyond, so the approved image/title/deck/meta hierarchy stops holding.
Ordering and content model are untouched. */
@media (max-width: 760px) {
.issue-grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* The other two Current Issue compositions are fixed-percentage flex rows
with heavy fixed padding, and both overflowed