` on the , so each volume re-skins the
* whole site from two variables. Adding volume 07 is one block here.
* Accents are sampled from the cover art by _sample_accent.py — the most
* saturated colour, which on these covers is the flat type of the cover lines.
* A starting point, not a verdict: override by hand freely. */
/* The homepage IS the current issue, so it wears the current issue's skin.
* When volume 07 lands, move `--home` onto that block. */
.phpew-page--home,
.phpew-page--volume-06 {
//--jfd-accent: #30b040;
//--jfd-accent-2: #6ede7c;
// --jfd-cover-art: url("https://s3.us-east-2.amazonaws.com/just-femme-and-dandy-bucket-300272448281-us-east-2-an/2b83e3839253/uploads/site/11a21282-jfdvol06-cover-ver2c-01.webp");
}
.phpew-page--vol-01-inaugural {
//--jfd-accent: #f0c040;
//--jfd-accent-2: #ffdc7d;
--jfd-cover-art: url("https://s3.us-east-2.amazonaws.com/just-femme-and-dandy-bucket-300272448281-us-east-2-an/2b83e3839253/uploads/site/40052bb9-jfd_vol01_cover.webp");
}
/* ── 3. Chrome ─────────────────────────────────────────────────────────── */
.phpew-header {
position: sticky;
top: 0;
z-index: 50;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 1rem 2rem;
padding: 1rem var(--jfd-gutter);
background: color-mix(in oklab, var(--jfd-ink) 82%, transparent);
backdrop-filter: blur(14px) saturate(140%);
border-bottom: 1px solid color-mix(in oklab, var(--jfd-fg) 14%, transparent);
}
.phpew-brand {
font-family: var(--jfd-display);
font-weight: 700;
font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
letter-spacing: -0.03em;
text-transform: lowercase;
color: var(--jfd-fg);
text-decoration: none;
margin-right: auto;
}
.phpew-brand::after {
content: "";
display: inline-block;
width: 0.5em; height: 0.5em;
margin-left: 0.35em;
border-radius: 50%;
background: var(--jfd-accent);
}
.phpew-page-nav, .phpew-nav { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: baseline; }
.phpew-page-nav-link, .phpew-nav-link {
font-family: var(--jfd-display);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--jfd-muted);
text-decoration: none;
padding-block: 0.25rem;
border-bottom: 2px solid transparent;
transition: color 0.18s, border-color 0.18s;
}
.phpew-page-nav-link:hover, .phpew-nav-link:hover,
.phpew-page-nav-link.is-active {
color: var(--jfd-fg);
border-bottom-color: var(--jfd-accent);
}
.phpew-btn, .phpew-nav-signup {
font-family: var(--jfd-display);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.55rem 1.1rem;
border-radius: 999px;
background: var(--jfd-accent);
color: var(--jfd-ink);
text-decoration: none;
border: 0;
transition: transform 0.18s, background 0.18s;
}
.phpew-btn:hover, .phpew-nav-signup:hover {
transform: translateY(-1px);
background: var(--jfd-accent-2);
}
/* ── 4. Block rhythm ───────────────────────────────────────────────────────
* Padding sits on the outer block; the content well is the multi wrapper when
* there is one, or the block itself when a single input collapsed it. */
.phpew-main > .phpew-section,
.phpew-layout > .phpew-section {
padding-block: clamp(3.5rem, 8vw, 7rem);
padding-inline: var(--jfd-gutter);
}
.phpew-main > .phpew-section > .phpew-section-multi {
max-width: var(--jfd-max);
margin-inline: auto;
}
.phpew-main > .phpew-section--jfd-cover { padding: 0; }
/* ── 5. Type ─────────────────────────────────────────────────────────────── */
.phpew-section-heading {
font-family: var(--jfd-display);
font-weight: 700;
line-height: 0.94;
letter-spacing: -0.035em;
text-transform: lowercase;
text-wrap: balance;
margin: 0 0 1rem;
}
.phpew-section-markdown p { margin: 0 0 1.35em; }
.phpew-section-markdown a { color: var(--jfd-accent-2); text-underline-offset: 0.2em; }
.phpew-section-markdown a:hover { color: var(--jfd-accent); }
/* ── 6. Cover ──────────────────────────────────────────────────────────────
* Their cover art is a FINISHED magazine cover — wordmark, cover lines and all.
* Overlaying site type on it fights the artwork, so it is presented as the
* object it is: a printed thing standing on the page, billing set beside it.
* A blurred copy of the same art tints the band behind, so each issue colours
* its own opening spread. */
.phpew-section--jfd-cover {
position: relative;
min-height: min(88svh, 56rem);
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
grid-template-rows: auto auto auto;
align-content: center;
align-items: center;
gap: 0 clamp(2rem, 6vw, 6rem);
/* Constrain the spread to the same 76rem measure the rest of the site uses.
* Without this the art column keeps growing with the viewport while the type
* is capped by its clamp, so on a wide screen the cover swallows the page and
* the headline looks tiny next to it. The blurred ground still runs full width
* because it is painted by ::before on the full-bleed section. */
padding-block: clamp(3rem, 7vw, 6rem);
padding-inline: max(var(--jfd-gutter), calc((100% - var(--jfd-max)) / 2));
overflow: hidden;
isolation: isolate;
}
/* Belt and braces: the artwork never exceeds a sensible printed-object size. */
.phpew-section--jfd-cover .jfd-cover-art { max-width: 32rem; justify-self: end; }
.phpew-section--jfd-cover .jfd-cover-art {
grid-column: 1;
grid-row: 1 / -1;
align-self: center;
}
.phpew-section--jfd-cover [data-phpew-field="issue"],
.phpew-section--jfd-cover [data-phpew-field="headline"],
.phpew-section--jfd-cover [data-phpew-field="standfirst"] { grid-column: 2; }
.phpew-section--jfd-cover .jfd-cover-art img {
display: block;
width: 100%;
height: auto;
box-shadow:
0 0.15rem 0 color-mix(in oklab, var(--jfd-fg) 20%, transparent),
0 2rem 5rem rgba(0, 0, 0, 0.75);
rotate: -1.2deg;
transition: rotate 0.4s ease, translate 0.4s ease;
}
.phpew-section--jfd-cover .jfd-cover-art:hover img { rotate: 0deg; translate: 0 -0.5rem; }
.phpew-section--jfd-cover::before {
content: "";
position: absolute;
inset: -10%;
z-index: -2;
background-image: var(--jfd-cover-art);
background-size: cover;
background-position: center 20%;
filter: blur(60px) var(--jfd-wash, saturate(1.6) brightness(0.5));
opacity: 0.75;
}
.phpew-section--jfd-cover::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(to top,
var(--jfd-ink) 1%,
color-mix(in oklab, var(--jfd-ink) 45%, transparent) 55%,
color-mix(in oklab, var(--jfd-ink) 70%, transparent));
}
.phpew-section--jfd-cover [data-phpew-field="issue"] {
font-family: var(--jfd-display);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--jfd-accent);
align-self: end;
}
.phpew-section--jfd-cover [data-phpew-field="headline"] {
font-size: clamp(2.5rem, 1rem + 6vw, 7rem);
line-height: 0.88;
letter-spacing: -0.045em;
margin: 0.5rem 0 1rem;
max-width: 14ch;
}
.phpew-section--jfd-cover [data-phpew-field="standfirst"] {
font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.6rem);
line-height: 1.45;
color: color-mix(in oklab, var(--jfd-fg) 82%, transparent);
max-width: 42ch;
align-self: start;
}
/* ── 7. Masthead ───────────────────────────────────────────────────────────
* Portraits framed, bios adjacent. The frame is a real object: paper mat,
* halftone edge, a slight rotation alternating down the column so the page
* reads hand-assembled rather than gridded. Rows alternate side.
*
* The frame needs a wrapper element, so the template declares one on the image
* field (`wrapper: {tag: div, class: jfd-frame}`) — a pseudo-element cannot
* render on a replaced ![]()
. */
.phpew-section--jfd-masthead .phpew-section-multi {
display: grid;
gap: clamp(4rem, 9vw, 8rem);
}
/* `grid-auto-rows: min-content` is the important line. Without it the rows are
* sized by the portrait (which spans all of them), so the six text fields get
* spread down a very tall column with big dead gaps between name and pronouns.
* Sides alternate by reassigning COLUMNS, not by flipping `direction` -- the rtl
* trick reorders auto-placed items and scattered the fields on even rows. */
.phpew-section--jfd-member {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
grid-auto-rows: min-content;
/* Six text rows at their natural height, then a filler row that soaks up the
* portrait's leftover height. Without the filler, the frame (which spans every
* row) pushes its extra height into the text tracks and the block drifts down
* the photo instead of starting level with its top edge. */
grid-template-rows: repeat(6, min-content) 1fr;
align-content: start;
column-gap: clamp(1.5rem, 4vw, 4rem);
row-gap: 0;
}
.phpew-section--jfd-member .jfd-frame {
grid-column: 1;
grid-row: 1 / -1;
align-self: start;
}
.phpew-section--jfd-member > :not(.jfd-frame) { grid-column: 2; }
.phpew-section--jfd-member:nth-child(even) .jfd-frame { grid-column: 2; }
.phpew-section--jfd-member:nth-child(even) > :not(.jfd-frame) { grid-column: 1; }
/* `margin-inline` buys room for the rotation: a rotated box's bounding width
* grows with its HEIGHT, and these are tall portraits. Without it they punch
* straight through the page gutter. */
.jfd-frame {
position: relative;
margin-inline: 1.25rem;
padding: 0.9rem 0.9rem 3.25rem;
background: var(--jfd-paper);
box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.55);
rotate: -1.2deg;
transition: rotate 0.35s ease, translate 0.35s ease;
}
.phpew-section--jfd-member:nth-child(even) .jfd-frame { rotate: 1.4deg; }
.jfd-frame:hover { rotate: 0deg; translate: 0 -0.4rem; }
.jfd-frame img {
display: block;
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
filter: saturate(1.05) contrast(1.03);
}
/* Halftone bleed along the mat's bottom edge — the logo motif, quietly. */
.jfd-frame::after {
content: "";
position: absolute;
left: 0.9rem; right: 0.9rem; bottom: 1.1rem;
height: 1.4rem;
color: var(--jfd-accent);
background: var(--jfd-halftone);
opacity: 0.55;
-webkit-mask-image: linear-gradient(to right, #000, transparent 72%);
mask-image: linear-gradient(to right, #000, transparent 72%);
}
.phpew-section--jfd-member [data-phpew-field="name"] {
font-size: clamp(1.75rem, 1rem + 2.6vw, 3rem);
line-height: 0.98;
margin: 0 0 0.6rem;
align-self: start;
}
.phpew-section--jfd-member [data-phpew-field="pronouns"] {
justify-self: start;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 0.3rem 0.7rem;
border-radius: 999px;
border: 1px solid color-mix(in oklab, var(--jfd-accent) 55%, transparent);
color: var(--jfd-accent);
margin-bottom: 0.9rem;
}
.phpew-section--jfd-member [data-phpew-field="role"] {
font-family: var(--jfd-display);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--jfd-accent-2);
margin-bottom: 1.1rem;
}
.phpew-section--jfd-member [data-phpew-field="bio"] { max-width: 48ch; }
.phpew-section--jfd-member [data-phpew-field="likes"] {
border-left: 2px solid var(--jfd-accent);
padding-left: 1rem;
font-style: italic;
color: color-mix(in oklab, var(--jfd-fg) 84%, transparent);
max-width: 48ch;
margin-bottom: 1rem;
}
.phpew-section--jfd-member [data-phpew-field="astrology"] {
font-family: var(--jfd-display);
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: lowercase;
color: var(--jfd-muted);
}
/* ── 8. Table of contents ──────────────────────────────────────────────────
* Departments are the spine of the magazine, so they get oversized heads and a
* numbered index; pieces are an editorial list whose rows shift on hover. */
.phpew-section--jfd-toc { counter-reset: jfd-dept; }
.phpew-section--jfd-toc .phpew-section-markdown,
.phpew-section--jfd-toc .phpew-section-prose {
max-width: var(--jfd-max);
margin-inline: auto;
}
.phpew-section--jfd-toc h2,
.phpew-section--jfd-toc h3 {
position: relative;
counter-increment: jfd-dept;
font-family: var(--jfd-display);
font-weight: 700;
font-size: clamp(1.75rem, 1rem + 3.4vw, 3.25rem);
line-height: 0.95;
letter-spacing: -0.03em;
text-transform: lowercase;
margin: clamp(3rem, 6vw, 5rem) 0 1.25rem;
padding-bottom: 0.6rem;
padding-right: 4.5ch; /* keeps a long name clear of the folio */
border-bottom: 2px solid var(--jfd-accent);
color: var(--jfd-accent); /* the department carries the issue colour */
}
.phpew-section--jfd-toc h2:first-child,
.phpew-section--jfd-toc h3:first-child { margin-top: 0; }
.phpew-section--jfd-toc h2::after,
.phpew-section--jfd-toc h3::after {
/* The folio number, set as a real display numeral rather than a caption.
* Sits on the baseline of the rule and is knocked back so it reads as a page
* number behind the department, not as a second heading competing with it. */
content: counter(jfd-dept, decimal-leading-zero);
position: absolute;
right: 0;
bottom: 0.6rem; /* matches the head's padding-bottom, so the
* numeral rests ON the rule, not across it */
font-size: clamp(2.25rem, 5vw, 4.25rem);
line-height: 0.78;
font-weight: 700;
letter-spacing: -0.04em;
color: color-mix(in oklab, var(--jfd-accent) 38%, transparent);
pointer-events: none;
}
.phpew-section--jfd-toc ul { list-style: none; margin: 0; padding: 0; }
.phpew-section--jfd-toc li { margin: 0; }
.phpew-section--jfd-toc li a {
display: block;
padding: 1.1rem 0;
border-bottom: 1px solid color-mix(in oklab, var(--jfd-fg) 12%, transparent);
text-decoration: none;
color: var(--jfd-fg);
font-family: var(--jfd-display);
font-weight: 600;
font-size: clamp(1.15rem, 1rem + 1vw, 1.9rem);
line-height: 1.12;
letter-spacing: -0.02em;
text-transform: lowercase;
text-wrap: balance;
transition: padding-left 0.22s ease, color 0.22s;
}
.phpew-section--jfd-toc li a:hover { padding-left: 1rem; color: var(--jfd-accent-2); }
.phpew-section--jfd-toc li em {
display: block;
font-family: var(--jfd-text);
font-style: normal;
font-size: 0.8125rem;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--jfd-muted);
margin-top: 0.45rem;
}
/* ── 9. The piece ──────────────────────────────────────────────────────────
* A long read of 1,000-2,500 words, so the reading column is the whole job.
* The horizontal offset sits on the SECTION so `100%` resolves against the
* full-width block and reproduces exactly where a centred 76rem well starts.
* That keeps the piece's left edge on the same line as the masthead and
* contents at every viewport, while the column itself stays 56rem. */
.phpew-main > .phpew-section--jfd-piece {
padding-inline: max(var(--jfd-gutter), calc((100% - var(--jfd-max)) / 2 + var(--jfd-gutter)));
}
.phpew-section--jfd-piece > * { max-width: 56rem; }
.phpew-section--jfd-piece [data-phpew-field="title"] {
font-size: clamp(2.25rem, 1rem + 5.5vw, 5rem);
line-height: 0.9;
letter-spacing: -0.04em;
}
.phpew-section--jfd-piece [data-phpew-field="contributor"] {
display: block;
font-family: var(--jfd-display);
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--jfd-accent);
margin-bottom: 2.5rem;
}
.phpew-section--jfd-piece .phpew-section-prose > p:first-of-type::first-letter,
.phpew-section--jfd-piece .phpew-section-markdown > p:first-of-type::first-letter {
float: left;
font-family: var(--jfd-display);
font-size: 4.2em;
line-height: 0.78;
font-weight: 700;
padding: 0.06em 0.09em 0 0;
color: var(--jfd-accent);
}
.phpew-section--jfd-piece blockquote {
margin: 2.5rem 0;
padding-left: 1.5rem;
border-left: 3px solid var(--jfd-accent);
font-family: var(--jfd-display);
font-size: 1.5rem;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--jfd-accent-2);
}
/* Images default to WRAPPED, not full-bleed: most of what runs inside these
* essays is a reference image or a snapshot, and blowing those up strands them
* on the black ground. They alternate sides and the prose closes around them.
* `.jfd-fig-wide` opts a real photograph into the full width; `.jfd-fig-small`
* is assigned at import to anything under 700px so it is never upscaled. */
.phpew-section--jfd-piece figure {
float: right;
width: min(19rem, 46%);
margin: 0.45rem 0 1.5rem 2rem;
shape-margin: 1.5rem;
}
.phpew-section--jfd-piece figure:nth-of-type(even) {
float: left;
margin: 0.45rem 2rem 1.5rem 0;
}
.phpew-section--jfd-piece figure img {
display: block;
width: 100%;
height: auto;
max-height: 34rem;
object-fit: contain;
}
.phpew-section--jfd-piece figure.jfd-fig-small { width: min(15rem, 38%); }
.phpew-section--jfd-piece figure.jfd-fig-small img { max-height: 22rem; }
.phpew-section--jfd-piece figure.jfd-fig-wide {
float: none;
width: min(68rem, 88vw);
margin: 3rem 0;
}
.phpew-section--jfd-piece figure.jfd-fig-wide img { max-height: none; }
.phpew-section--jfd-piece figcaption {
font-size: 0.8125rem;
line-height: 1.55;
color: var(--jfd-muted);
margin-top: 0.75rem;
max-width: 46ch;
}
/* A hard stop so the next block never starts beside a dangling image. */
.phpew-section--jfd-piece::after { content: ""; display: block; clear: both; }
/* ── 10. Gallery strip ─────────────────────────────────────────────────────
* Horizontal scroll-snap, CSS only, no carousel script. The scrollbar is part
* of the design: it reads as a progress rail under the strip. Standard
* properties first (Firefox, Chrome 121+), ::-webkit- for older Blink. `auto`
* not `thin` — thin caps Firefox at a hairline and this rail is meant to show. */
.phpew-section--jfd-gallery .phpew-section-multi {
max-width: none;
display: grid;
grid-auto-flow: column;
grid-auto-columns: min(34rem, 78vw);
gap: 1rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 1.5rem;
scrollbar-width: auto;
scrollbar-color: var(--jfd-accent) color-mix(in oklab, var(--jfd-fg) 14%, transparent);
}
.phpew-section--jfd-gallery .phpew-section-multi > * { scroll-snap-align: center; }
.phpew-section--jfd-gallery img {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
}
.phpew-section--jfd-gallery .phpew-section-multi::-webkit-scrollbar { height: 12px; }
/* Drop the platform stepper arrows — they are what make a styled scrollbar
* still read as an OS scrollbar rather than a rail. */
.phpew-section--jfd-gallery .phpew-section-multi::-webkit-scrollbar-button {
display: none; width: 0; height: 0;
}
.phpew-section--jfd-gallery .phpew-section-multi::-webkit-scrollbar-track {
background: color-mix(in oklab, var(--jfd-fg) 14%, transparent);
}
.phpew-section--jfd-gallery .phpew-section-multi::-webkit-scrollbar-thumb {
background: var(--jfd-accent);
border-radius: 0;
}
.phpew-section--jfd-gallery .phpew-section-multi:hover::-webkit-scrollbar-thumb {
background: var(--jfd-accent-2);
}
/* ── 11. Footer ────────────────────────────────────────────────────────── */
.phpew-footer {
position: relative;
padding: clamp(3rem, 6vw, 5rem) var(--jfd-gutter);
border-top: 1px solid color-mix(in oklab, var(--jfd-fg) 14%, transparent);
color: var(--jfd-muted);
font-size: 0.875rem;
}
.phpew-footer::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 6rem;
color: var(--jfd-accent);
background: var(--jfd-halftone);
opacity: 0.16;
-webkit-mask-image: linear-gradient(to bottom, #000, transparent);
mask-image: linear-gradient(to bottom, #000, transparent);
pointer-events: none;
}
.phpew-footer a { color: var(--jfd-accent-2); }
/* ── 12. Narrow screens ────────────────────────────────────────────────── */
@media (max-width: 48rem) {
.phpew-section--jfd-cover {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.phpew-section--jfd-cover .jfd-cover-art { grid-column: 1; grid-row: auto; }
.phpew-section--jfd-cover [data-phpew-field="issue"],
.phpew-section--jfd-cover [data-phpew-field="headline"],
.phpew-section--jfd-cover [data-phpew-field="standfirst"] { grid-column: 1; }
.phpew-section--jfd-member { grid-template-columns: 1fr; }
.phpew-section--jfd-member .jfd-frame,
.phpew-section--jfd-member:nth-child(even) .jfd-frame {
grid-column: 1;
grid-row: auto;
margin-bottom: 1.5rem;
}
.phpew-section--jfd-member > :not(.jfd-frame),
.phpew-section--jfd-member:nth-child(even) > :not(.jfd-frame) { grid-column: 1; }
/* Wrapping a 46%-wide image around a phone measure leaves ~15 characters a
* line. Unfloat and let images sit on their own. */
.phpew-section--jfd-piece figure,
.phpew-section--jfd-piece figure:nth-of-type(even),
.phpew-section--jfd-piece figure.jfd-fig-wide {
float: none;
width: 100%;
margin: 2rem 0;
}
}
/* ── 13. Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.jfd-frame,
.phpew-section--jfd-cover .jfd-cover-art img,
.phpew-section--jfd-toc li a,
.phpew-btn { transition: none; }
.jfd-frame { rotate: 0deg; }
}
/* ── 14. Contrast guards ───────────────────────────────────────────────────
* The parent theme is phpew-LIGHT (parentage cannot be changed from here), so
* its base stylesheet assumes dark text on light surfaces. These rules pin the
* few interactive states where that assumption showed through as pale-on-pale.
*
* The rule of thumb: anything that takes an accent BACKGROUND gets ink text;
* anything on the page ground gets paper text. Never let both go light. */
/* Nav links are text, not pills. The base sheet was filling them on hover,
* leaving white type on pale pink. */
.phpew-nav-link:hover,
.phpew-nav-link:focus-visible,
.phpew-page-nav-link:hover,
.phpew-page-nav-link:focus-visible {
background: transparent;
color: var(--jfd-fg);
}
/* Any filled button, in any state, keeps ink-on-accent. */
.phpew-btn,
.phpew-btn:hover,
.phpew-btn:focus-visible,
.phpew-btn:active,
.phpew-nav-signup,
.phpew-nav-signup:hover,
button.phpew-btn:hover {
color: var(--jfd-ink);
}
.phpew-btn:hover,
.phpew-nav-signup:hover,
button.phpew-btn:hover { background: var(--jfd-accent-2); }
/* Cards and panels: the forum board list was reading as white slabs on black
* because the light parent ships #ffffff here. */
.phpew-card,
.phpew-panel,
.phpew-forum-category,
.phpew-forum-thread,
.phpew-forum-post {
background: var(--phpew-card-bg, #141216);
color: var(--jfd-fg);
border: 1px solid color-mix(in oklab, var(--jfd-fg) 12%, transparent);
}
.phpew-card a, .phpew-panel a,
.phpew-forum-category a, .phpew-forum-thread a { color: var(--jfd-accent-2); }
/* Form fields inherit the dark ground rather than the light parent's white. */
input, textarea, select {
background: color-mix(in oklab, var(--jfd-fg) 6%, transparent);
color: var(--jfd-fg);
border: 1px solid color-mix(in oklab, var(--jfd-fg) 20%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--jfd-muted); }
/* A visible focus ring everywhere, since several of these states now share a
* background with their container. */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
outline: 2px solid var(--jfd-accent);
outline-offset: 2px;
}
/* ── 15. Images inside a markdown body ─────────────────────────────────────
* Markdown emits a bare ![]()
wrapped in its own , not a , so the
* figure rules above never catch it. Float the PARAGRAPH (the img alone cannot
* carry the wrap, since its parent p would still take a full line) and let the
* prose close around it, alternating sides down the piece.
*
* `:has()` is the whole mechanism here; without it images simply stack full
* width, which is a fine fallback rather than a broken one. */
.phpew-section--jfd-piece [data-phpew-field="body"] p:has(> img) {
float: right;
width: min(19rem, 46%);
margin: 0.45rem 0 1.25rem 2rem;
shape-margin: 1.5rem;
}
.phpew-section--jfd-piece [data-phpew-field="body"] p:has(> img):nth-of-type(even) {
float: left;
margin: 0.45rem 2rem 1.25rem 0;
}
.phpew-section--jfd-piece [data-phpew-field="body"] p > img {
display: block;
width: 100%;
height: auto;
max-height: 30rem;
object-fit: contain;
}
/* Clear at the end of the body so the footer never rides up beside an image. */
.phpew-section--jfd-piece [data-phpew-field="body"]::after {
content: "";
display: block;
clear: both;
}
/* Long reads: give the markdown body the same measure and rhythm the rest of
* the piece uses. */
.phpew-section--jfd-piece [data-phpew-field="body"] p { margin: 0 0 1.35em; }
.phpew-section--jfd-piece [data-phpew-field="body"] a {
color: var(--jfd-accent-2);
text-underline-offset: 0.2em;
}
.phpew-section--jfd-piece [data-phpew-field="body"] a:hover { color: var(--jfd-accent); }
@media (max-width: 48rem) {
.phpew-section--jfd-piece [data-phpew-field="body"] p:has(> img),
.phpew-section--jfd-piece [data-phpew-field="body"] p:has(> img):nth-of-type(even) {
float: none;
width: 100%;
margin: 2rem 0;
}
}
/* ── 16. Back-issue skins ──────────────────────────────────────────────────
* One block per volume, same mechanism as vol 06: PHPew puts `phpew-page--`
* on the , so each issue re-skins the whole site from its own two variables.
*
* Accents are sampled from each cover by _sample_accent.py and then lifted to a
* readability floor. A raw sample can come back very dark (vol 05's splash gives
* #a00000), which is fine as artwork and unreadable as heading type on near-black.
* Volume 01's block is defined earlier in this sheet. */
.phpew-page--vol-02-rebirth {
--jfd-accent: #f08010;
--jfd-accent-2: #ffa54a;
/* Canonical CDN URL. The static1.squarespace.com form 301-redirects here; an
* ![]()
follows it but the background-image in this rule is better off direct. */
--jfd-cover-art: url("https://images.squarespace-cdn.com/content/5f2383e524da5648a132c283/1643821811151-KPZXGXZFW5W1DT6QU0HV/jfd2-cover.png");
}
/* 03 and 05 have no cover artwork anywhere in the capture -- only the full-bleed
* gradient they used as a splash. It still tints the band behind the contents;
* there is simply no printed object to stand on the page. */
.phpew-page--vol-03-sustain {
--jfd-accent: #f0e040;
--jfd-accent-2: #fff37d;
--jfd-cover-art: url("https://s3.us-east-2.amazonaws.com/just-femme-and-dandy-bucket-300272448281-us-east-2-an/2b83e3839253/uploads/site/jfd3-cover.webp");
}
.phpew-page--vol-04-survive {
--jfd-accent: #bd3356;
--jfd-accent-2: #de6e8a;
--jfd-cover-art: url("https://s3.us-east-2.amazonaws.com/just-femme-and-dandy-bucket-300272448281-us-east-2-an/2b83e3839253/uploads/site/0b32e0ac-cover.webp");
}
.phpew-page--vol-05-resurrect {
--jfd-accent: #bd0000;
--jfd-accent-2: #d12f2f;
--jfd-cover-art: url("https://s3.us-east-2.amazonaws.com/just-femme-and-dandy-bucket-300272448281-us-east-2-an/2b83e3839253/uploads/site/jfd5-cover.webp");
}
/* A volume page with no cover block needs its own top spacing, since the cover
* band is what normally clears the sticky header. */
.phpew-main > .phpew-section--vol-03-sustain-contents,
.phpew-main > .phpew-section--vol-05-resurrect-contents {
padding-top: clamp(6rem, 11vw, 10rem);
}
/* ══════════════════════════════════════════════════════════════════════════
* 17. Light-theme adaptation
*
* The palette above now derives from the theme's tokens, so the ground, text
* and mat follow whatever theme is active. What could NOT derive are the
* places where a value only makes sense against a dark ground -- a scrim that
* fades to black, a wash that knocks the cover art back, ink-coloured type on
* a filled button. Those are corrected here.
*
* Appended rather than edited in place on purpose: the sheet has mixed CRLF/LF
* line endings (admin textarea vs API writes), which makes multi-line matching
* unreliable. Equal specificity + later position wins, which is enough.
* ══════════════════════════════════════════════════════════════════════════ */
/* The blurred cover band. On cream it has to be lifted, not darkened. */
.phpew-section--jfd-cover::before { opacity: var(--jfd-wash-opacity, 0.75); }
/* The scrim under the cover billing fades to the GROUND, whatever it is. */
.phpew-section--jfd-cover::after {
background: linear-gradient(to top,
var(--jfd-ink) 1%,
color-mix(in oklab, var(--jfd-ink) 55%, transparent) 55%,
color-mix(in oklab, var(--jfd-ink) 78%, transparent));
}
/* The portrait mat sits ON a cream page now, so it needs an edge to read as a
* print rather than dissolving into the background. */
.jfd-frame {
border: 1px solid color-mix(in oklab, var(--jfd-fg) 10%, transparent);
box-shadow: 0 1rem 2.5rem color-mix(in oklab, var(--jfd-fg) 18%, transparent);
}
/* Filled controls take the theme's own on-accent colour. Previously pinned to
* `--jfd-ink`, which was fine when ink meant near-black and is wrong now that
* it means the page ground. */
.phpew-btn,
.phpew-btn:hover,
.phpew-btn:focus-visible,
.phpew-btn:active,
.phpew-nav-signup,
.phpew-nav-signup:hover,
button.phpew-btn:hover { color: var(--phpew-accent-fg, #fff); }
/* Shadows tuned for a dark page are invisible on cream; these are ink-based. */
.phpew-section--jfd-cover .jfd-cover-art img {
box-shadow:
0 0.15rem 0 color-mix(in oklab, var(--jfd-fg) 12%, transparent),
0 1.5rem 3.5rem color-mix(in oklab, var(--jfd-fg) 22%, transparent);
}
/* ── Per-issue accents, recomputed for the cream ground ────────────────────
* The earlier values were sampled from each cover then LIFTED for legibility
* on near-black. On cream they have to go the other way. Each is darkened
* along its own hue until it clears WCAG AA (4.5:1) against #f5f1e8, so the
* issue keeps its identity and the type stays readable. Measured contrast is
* noted per line. */
.phpew-page--vol-01-inaugural { --jfd-accent: #846923; --jfd-accent-2: #a8842c; } /* 4.6:1 */
/* Vol 02 is picked by hand, not sampled. Its cover is a hot-pink-to-orange
* rainbow border, and "most frequent saturated colour" landed on the orange
* band (28.5k px) barely ahead of red (26.4k) -- which darkened to brown and
* read as nothing. Frequency finds the biggest area, not the character. */
.phpew-page--vol-02-rebirth { --jfd-accent: #cf1f77; --jfd-accent-2: #a81760; } /* 4.5:1 */
.phpew-page--vol-03-sustain { --jfd-accent: #776f20; --jfd-accent-2: #968b28; } /* 4.6:1 */
.phpew-page--vol-04-survive { --jfd-accent: #b03050; --jfd-accent-2: #c93a5c; } /* 5.5:1 */
.phpew-page--vol-05-resurrect { --jfd-accent: #a00000; --jfd-accent-2: #c40000; } /* 7.5:1 */
.phpew-page--home,
.phpew-page--volume-06 { --jfd-accent: #227d2d; --jfd-accent-2: #2a9c38; } /* 4.6:1 */
/* ══════════════════════════════════════════════════════════════════════════
* 18. Per-issue skin on PIECE pages, and readable links
*
* Volume pages carry `phpew-page--vol-01-inaugural`, but every piece has its
* own slug, so none of the volume rules reached them and all 195 pieces fell
* back to the house accent. PHPew also emits `data-page=""` on the body,
* and JFD's slugs are prefixed by issue number, so a prefix match puts each
* piece in its own issue's colour without touching any content.
* ══════════════════════════════════════════════════════════════════════════ */
[data-page^="01"], [data-page^="vol-01"] {
--jfd-accent: #846923; --jfd-accent-2: #6b551c;
}
[data-page^="02"], [data-page^="vol-02"] {
--jfd-accent: #cf1f77; --jfd-accent-2: #a81760;
}
[data-page^="03"], [data-page^="vol-03"], [data-page="letter-from-the-editor-vol3"] {
--jfd-accent: #776f20; --jfd-accent-2: #5f5919;
}
[data-page^="04"], [data-page^="vol-04"], [data-page="letter-from-the-editor-person"],
[data-page="for-us-by-us"] {
--jfd-accent: #b03050; --jfd-accent-2: #8f2741;
}
[data-page^="05"], [data-page^="vol-05"], [data-page="letter-from-the-editor-vol05"] {
--jfd-accent: #a00000; --jfd-accent-2: #820000;
}
[data-page^="06"], [data-page="volume-06"], [data-page="home"] {
--jfd-accent: #227d2d; --jfd-accent-2: #1b6424;
}
/* Links in running prose take the CONTRAST-CHECKED accent, not accent-2.
* accent-2 is the lighter partner used for large display type; at body size on
* cream it was landing around 3:1 -- the pale pink that started this. Underline
* them too: colour alone is not a link affordance. */
.phpew-section--jfd-piece [data-phpew-field="body"] a,
.phpew-section-markdown a,
.phpew-section-prose a,
.phpew-content--jfd-member [data-phpew-field="bio"] a {
color: var(--jfd-accent);
text-decoration: underline;
text-underline-offset: 0.18em;
text-decoration-thickness: from-font;
}
.phpew-section--jfd-piece [data-phpew-field="body"] a:hover,
.phpew-section-markdown a:hover,
.phpew-section-prose a:hover,
.phpew-content--jfd-member [data-phpew-field="bio"] a:hover {
color: var(--jfd-accent-2);
text-decoration-thickness: 2px;
}
/* The contents list is a nav, not prose -- it keeps the plain treatment and
* gets its emphasis from size and the hover shift instead. */
.phpew-section--jfd-toc li a { text-decoration: none; color: var(--jfd-fg); }
/* ══════════════════════════════════════════════════════════════════════════
* 19. Per-issue accents, final — picked, not sampled
*
* The sampler ("most frequent strongly-saturated colour") works on a cover with
* a clear brand colour, and fails on anything polychrome: on vol 02's rainbow
* border it found the widest band, and on vol 03 -- whose only surviving art is
* a soft yellow-green splash, no cover was ever published -- it returned a muddy
* olive. It also produced two near-identical browns across six issues.
*
* These are chosen by hand instead. Each is a colour genuinely present in that
* issue's own artwork, each darkened along its own hue until it clears WCAG AA
* against the cream ground, and the six are spread across the wheel so no two
* issues read alike. Ratio noted per line.
* ══════════════════════════════════════════════════════════════════════════ */
.phpew-page--vol-01-inaugural, [data-page^="01"], [data-page^="vol-01"] {
--jfd-accent: #1d4ed8; /* blue: the arch on its cover runs blue/lime/orange/pink */
--jfd-accent-2: #1c4cd3; /* 6.0:1 */
}
.phpew-page--vol-02-rebirth, [data-page^="02"], [data-page^="vol-02"] {
--jfd-accent: #cc1e7d; /* magenta: the hot-pink edge of its rainbow border */
--jfd-accent-2: #a81967; /* 4.6:1 */
}
.phpew-page--vol-03-sustain, [data-page^="03"], [data-page^="vol-03"],
[data-page="letter-from-the-editor-vol3"] {
--jfd-accent: #a3590c; /* burnt orange: the orange blooms in its splash */
--jfd-accent-2: #894b0a; /* 4.7:1 */
}
.phpew-page--vol-04-survive, [data-page^="04"], [data-page^="vol-04"],
[data-page="letter-from-the-editor-person"], [data-page="for-us-by-us"] {
--jfd-accent: #b03050; /* wine: the figures on the survive cover */
--jfd-accent-2: #a62d4b; /* 5.5:1 */
}
.phpew-page--vol-05-resurrect, [data-page^="05"], [data-page^="vol-05"],
[data-page="letter-from-the-editor-vol05"] {
--jfd-accent: #c81010; /* red: its splash is entirely red and orange */
--jfd-accent-2: #b40e0e; /* 5.3:1 */
}
.phpew-page--home, .phpew-page--volume-06, [data-page^="06"],
[data-page="volume-06"], [data-page="home"] {
--jfd-accent: #227d2d; /* green: the colour its cover lines are actually set in */
--jfd-accent-2: #1d6926; /* 4.6:1 */
}
/* ── 20. Portraits are never cropped ───────────────────────────────────────
* The frame forced `aspect-ratio: 3/4` with `object-fit: cover`, so any
* portrait that was not natively 3:4 got trimmed -- Addie's is 2500x3750 (2:3)
* and lost the top of her head. Faces are the one thing you cannot crop for
* tidiness. Portraits now keep their own proportions and the frames vary in
* height, which suits a wall of prints better than a uniform grid anyway. */
.jfd-frame img {
aspect-ratio: auto;
height: auto;
object-fit: contain;
}
/* ── 21. The archive as covers ─────────────────────────────────────────────
* Same jfd-cover content as each issue's opening spread, reused as a card. The
* spread rules assume one full-viewport cover per page, so everything scoped
* inside the archive gets reset: no min-height, no blurred ground, no scrim.
* The billing (issue line, title, "27 pieces across 9 departments") sits under
* the artwork instead of beside it. */
.phpew-section--jfd-archive .phpew-section-multi {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
gap: clamp(2rem, 4vw, 3.5rem);
max-width: var(--jfd-max);
margin-inline: auto;
}
.phpew-section--jfd-archive .phpew-section--jfd-cover {
position: relative;
display: block;
min-height: 0;
padding: 0;
overflow: visible;
isolation: auto;
}
.phpew-section--jfd-archive .phpew-section--jfd-cover::before,
.phpew-section--jfd-archive .phpew-section--jfd-cover::after { content: none; }
.phpew-section--jfd-archive .jfd-cover-art { max-width: none; margin-bottom: 1.1rem; }
.phpew-section--jfd-archive .jfd-cover-art img {
rotate: -1deg;
transition: rotate 0.35s ease, translate 0.35s ease, box-shadow 0.35s ease;
}
.phpew-section--jfd-archive .phpew-section--jfd-cover:hover .jfd-cover-art img {
rotate: 0deg;
translate: 0 -0.4rem;
box-shadow: 0 2rem 4rem color-mix(in oklab, var(--jfd-fg) 30%, transparent);
}
.phpew-section--jfd-archive [data-phpew-field="issue"] {
display: block;
font-size: 0.75rem;
letter-spacing: 0.2em;
}
.phpew-section--jfd-archive [data-phpew-field="headline"] {
font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
max-width: none;
margin: 0.35rem 0 0.5rem;
}
.phpew-section--jfd-archive [data-phpew-field="standfirst"] {
font-size: 0.9375rem;
line-height: 1.5;
max-width: none;
color: var(--jfd-muted);
}
/* The link is a real anchor for keyboard and screen readers; stretching it over
* the card makes the whole thing clickable without wrapping the markup in one. */
.phpew-section--jfd-archive [data-phpew-field="link"] {
position: absolute;
inset: 0;
z-index: 2;
font-size: 0;
text-decoration: none;
}
.phpew-section--jfd-archive [data-phpew-field="link"]:focus-visible {
outline: 2px solid var(--jfd-accent);
outline-offset: 4px;
}
/* ── 22. House colours, and a spectrum on the masthead ─────────────────────
* Pages that are not an issue (masthead, archive, about, forum) fell through to
* the theme's stock navy + amber, which is the least queer pairing available.
* The house accent is now the magazine's own fuchsia, with electric violet as
* its partner -- both taken to WCAG AA on the cream ground.
*
* These sit on :root, NOT on .phpew-page, and that is load-bearing. Both
* selectors score (0,1,0), and this block was appended AFTER the per-issue
* accents in section 2b -- so on .phpew-page it won every tie and every volume
* except 03/04/05 (re-declared later still) rendered in the house fuchsia.
* Volume 01 was blue in the stylesheet and pink on the page. On :root the value
* reaches the body by INHERITANCE instead, and an inherited value loses to any
* rule that matches the body directly. The house colour becomes what it was
* always meant to be: the fallback, not the winner. */
.phpew-page {
/* the two house declarations moved down onto :root, see the note above */
}
:root {
--jfd-accent: #cc1e7d; /* fuchsia — the logo's pink, taken to AA 4.6:1 */
--jfd-accent-2: #7c3aed; /* electric violet 5.1:1 */
}
/* The masthead runs the full spectrum rather than one accent repeated eight
* times. Each person's pronoun pill takes the next colour round the wheel, so
* the page reads as a rainbow down the column -- which is the point of a queer
* masthead. Every value clears AA on cream, so this is decoration that costs
* nothing in legibility. */
.phpew-section--jfd-member:nth-child(8n+1) { --jfd-pill: #d61f1f; } /* red */
.phpew-section--jfd-member:nth-child(8n+2) { --jfd-pill: #b35c00; } /* orange */
.phpew-section--jfd-member:nth-child(8n+3) { --jfd-pill: #8a6a00; } /* amber */
.phpew-section--jfd-member:nth-child(8n+4) { --jfd-pill: #227d2d; } /* green */
.phpew-section--jfd-member:nth-child(8n+5) { --jfd-pill: #0f7b7b; } /* teal */
.phpew-section--jfd-member:nth-child(8n+6) { --jfd-pill: #1d4ed8; } /* blue */
.phpew-section--jfd-member:nth-child(8n+7) { --jfd-pill: #7c3aed; } /* violet */
.phpew-section--jfd-member:nth-child(8n+8) { --jfd-pill: #cc1e7d; } /* fuchsia */
.phpew-section--jfd-member [data-phpew-field="pronouns"] {
color: var(--jfd-pill, var(--jfd-accent));
border-color: color-mix(in oklab, var(--jfd-pill, var(--jfd-accent)) 60%, transparent);
background: color-mix(in oklab, var(--jfd-pill, var(--jfd-accent)) 8%, transparent);
}
.phpew-section--jfd-member [data-phpew-field="role"] {
color: var(--jfd-pill, var(--jfd-accent-2));
}
.phpew-section--jfd-member [data-phpew-field="likes"] {
border-left-color: var(--jfd-pill, var(--jfd-accent));
}
.jfd-frame::after { color: var(--jfd-pill, var(--jfd-accent)); }
/* ── 23. The cover link is an archive-only affordance ──────────────────────
* jfd-cover is used twice: as an issue's opening spread and as an archive card.
* The link only means something on the card -- on the issue's own page you are
* already there, so it rendered as a stray "Read volume 06" in the middle of
* the spread. Hidden by default, restored (and stretched over the card) inside
* the archive. Order matters: these two selectors have equal specificity, so
* the re-enable has to come second. */
.phpew-section--jfd-cover [data-phpew-field="link"] { display: none; }
.phpew-section--jfd-archive [data-phpew-field="link"] {
display: block;
position: absolute;
inset: 0;
z-index: 2;
font-size: 0;
text-decoration: none;
}
.phpew-section--jfd-archive [data-phpew-field="link"]:focus-visible {
outline: 2px solid var(--jfd-accent);
outline-offset: 4px;
}
/* ── 24. About page ────────────────────────────────────────────────────────
* It reuses the contents template, which styles h3 as an oversized department
* head with a folio numeral. That is right for an issue's table of contents and
* wrong for running prose, so on this page they become plain subheads and the
* body takes a reading measure. */
.phpew-page--about .phpew-section--jfd-about h3 {
font-size: clamp(1.35rem, 1rem + 1vw, 1.85rem);
color: var(--jfd-accent);
border-bottom: 0;
padding-right: 0;
margin: clamp(2.5rem, 5vw, 3.5rem) 0 0.75rem;
}
.phpew-page--about .phpew-section--jfd-about h3::after { content: none; }
.phpew-page--about .phpew-section--jfd-about .phpew-section-markdown {
max-width: 46rem;
margin-inline: 0;
}
.phpew-page--about .phpew-section--jfd-about p { margin: 0 0 1.35em; }
.phpew-page--about .phpew-section--jfd-about strong { color: var(--jfd-fg); }
/* ── 25. Volumes 03 and 05, now that their covers exist ────────────────────
* Both were sampled off a splash gradient because no cover art had survived the
* scrape -- vol 03 came back a muddy olive. With the real covers in hand the
* accents are picked from the artwork itself, and the blurred band behind each
* opening spread points at the cover rather than the old background.
*
* Vol 04 also moves here: its cover is 53k pixels of violet against 9k of red,
* so violet is plainly its colour, and taking it frees red for vol 05. The six
* issues now sit at six distinct points on the wheel. */
.phpew-page--vol-03-sustain, [data-page^="03"], [data-page^="vol-03"],
[data-page="letter-from-the-editor-vol3"] {
--jfd-accent: #467a13; /* the green ground and chartreuse border 4.6:1 */
--jfd-accent-2: #3a660f;
--jfd-cover-art: url("https://s3.us-east-2.amazonaws.com/just-femme-and-dandy-bucket-300272448281-us-east-2-an/2b83e3839253/uploads/site/jfd3-cover.webp");
}
.phpew-page--vol-04-survive, [data-page^="04"], [data-page^="vol-04"],
[data-page="letter-from-the-editor-person"], [data-page="for-us-by-us"] {
--jfd-accent: #7c3aed; /* violet: the purple ground, its dominant 5.1:1 */
--jfd-accent-2: #6c33ce;
}
.phpew-page--vol-05-resurrect, [data-page^="05"], [data-page^="vol-05"],
[data-page="letter-from-the-editor-vol05"] {
--jfd-accent: #d61f1f; /* red: the coral script and the wings 4.6:1 */
--jfd-accent-2: #b21919;
--jfd-cover-art: url("https://s3.us-east-2.amazonaws.com/just-femme-and-dandy-bucket-300272448281-us-east-2-an/2b83e3839253/uploads/site/jfd5-cover.webp");
}
/* ── 28. Breadcrumbs ───────────────────────────────────────────────────────
* The complaint these answer: you land on a piece from a search result or a
* shared link, and the only route back into the issue is the browser's back
* button. Every piece and page now carries the same trail above and below its
* body, so the way out is in reach at both ends of a 2,000-word read.
*
* The trail is a markdown field, so it arrives as one of s separated by
* literal slashes. The section sits directly in the layout grid, which means
* the first job is undoing the generic block padding — a crumb rail is chrome,
* not a section, and the 7rem of block padding every other section takes would
* strand it in open space. */
.phpew-layout > .phpew-section--jfd-crumb {
padding-block: 0;
padding-inline: max(var(--jfd-gutter), calc((100% - var(--jfd-max)) / 2));
}
/* A piece's reading column starts one gutter further in than the standard well
* (see section 9), so its crumbs have to follow it or they hang off the left
* edge of the text they belong to. Only the piece does this — the masthead
* shares the same layout but the standard measure. */
.phpew-layout:has(> .phpew-main > .phpew-section--jfd-piece) > .phpew-section--jfd-crumb {
padding-inline: max(var(--jfd-gutter), calc((100% - var(--jfd-max)) / 2 + var(--jfd-gutter)));
}
.phpew-section--jfd-crumb [data-phpew-field="trail"] p {
margin: 0;
font-family: var(--jfd-display);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--jfd-muted);
/* Three crumbs plus a long volume title overruns a phone. The loose leading
* lets it wrap onto a second line instead of raising a scrollbar. */
line-height: 1.9;
}
.phpew-section--jfd-crumb a {
color: var(--jfd-muted);
text-decoration: none;
padding-block: 0.35rem;
border-bottom: 1px solid transparent;
transition: color 0.18s, border-color 0.18s;
}
.phpew-section--jfd-crumb a:hover {
color: var(--jfd-accent);
border-bottom-color: var(--jfd-accent);
}
/* The last crumb is the page's own parent — the one you actually came for. */
.phpew-section--jfd-crumb a:last-of-type { color: var(--jfd-fg); }
/* Above the fold it stays quiet: tucked under the sticky header, over the
* title, taking no more room than it needs. */
.phpew-section--jfd-crumb[data-area="crumb-top"] {
padding-top: clamp(1.25rem, 3vw, 2rem);
}
/* At the foot of the read it is the main event, so it gets a rule and air. */
.phpew-section--jfd-crumb[data-area="crumb-bottom"] {
margin-top: clamp(3rem, 7vw, 5rem);
padding-block: clamp(1.5rem, 3vw, 2.25rem) clamp(3rem, 6vw, 4.5rem);
border-top: 1px solid color-mix(in oklab, var(--jfd-fg) 14%, transparent);
}
/* An arrow on the bottom trail only. At the end of a piece the gesture is
* "take me back out", not "where am I". */
.phpew-section--jfd-crumb[data-area="crumb-bottom"] [data-phpew-field="trail"] p::before {
content: "\2191\00a0\00a0";
color: var(--jfd-accent);
}
@media (prefers-reduced-motion: reduce) {
.phpew-section--jfd-crumb a { transition: none; }
}
/* Section 18 pins prose links to accent + underline. A crumb is navigation,
* not prose, so it opts back out — otherwise the trail reads as three links
* in the middle of a sentence. */
.phpew-section--jfd-crumb .phpew-section-markdown a { text-decoration: none; }
.phpew-section--jfd-crumb .phpew-section-markdown a:hover {
text-decoration: none;
color: var(--jfd-accent);
}
/* ── 29. Linked images in a markdown body ──────────────────────────────────
* Section 15 catches `p > img`. An image the author wrapped in a link lands as
* `p > a > img`, which matched none of it — so those rendered at natural size,
* up to 1,500px, and pushed a horizontal scrollbar onto every piece carrying
* one. Same treatment, one level deeper. */
.phpew-section--jfd-piece [data-phpew-field="body"] p:has(> a > img) {
float: right;
width: min(19rem, 46%);
margin: 0.45rem 0 1.25rem 2rem;
shape-margin: 1.5rem;
}
.phpew-section--jfd-piece [data-phpew-field="body"] p:has(> a > img):nth-of-type(even) {
float: left;
margin: 0.45rem 2rem 1.25rem 0;
}
/* The anchor is inline by default, so it would not take the img's height and
* the link target would be a sliver of the picture. */
.phpew-section--jfd-piece [data-phpew-field="body"] p > a:has(> img) { display: block; }
.phpew-section--jfd-piece [data-phpew-field="body"] p > a > img {
display: block;
width: 100%;
height: auto;
max-height: 30rem;
object-fit: contain;
}
@media (max-width: 48rem) {
.phpew-section--jfd-piece [data-phpew-field="body"] p:has(> a > img),
.phpew-section--jfd-piece [data-phpew-field="body"] p:has(> a > img):nth-of-type(even) {
float: none;
width: 100%;
margin: 2rem 0;
}
}
/* ── 30. The about page ────────────────────────────────────────────────────
* Two faults, one visual: the body copy sat in a 46rem column pinned hard to
* the left gutter with the rest of the page empty beside it, and it opened
* cold — no mark, no title, just prose. Section 24 capped the measure and set
* `margin-inline: 0`, but nothing ever put the SECTION in the 76rem well, so
* "flush left in the well" came out as "flush left on the screen", left of
* even the breadcrumb above it.
*
* The well goes on the section. The column stays left-aligned inside it, which
* is what you want for a long read — a centred 46rem column would float free
* of the crumb and the nav and belong to nothing. */
.phpew-layout > .phpew-section--jfd-about,
.phpew-layout > .phpew-section--jfd-about-head {
padding-inline: max(var(--jfd-gutter), calc((100% - var(--jfd-max)) / 2));
}
.phpew-layout > .phpew-section--jfd-about-head { padding-bottom: 0; }
.phpew-layout > .phpew-section--jfd-about { padding-top: clamp(2rem, 5vw, 3.5rem); }
/* The mark. Their logo is a finished square with the wordmark already in it, so
* it is presented as an object rather than used as a page title — set at a size
* that reads as a stamp on the page, not a banner across it. */
.phpew-section--jfd-about-head {
display: grid;
grid-template-columns: minmax(0, auto) minmax(0, 1fr);
align-items: end;
gap: 0 clamp(2rem, 5vw, 4rem);
}
.jfd-about-mark {
grid-column: 1;
grid-row: 1 / -1;
width: clamp(15rem, 44vw, 36rem);
align-self: center;
}
.jfd-about-mark img {
display: block;
width: 100%;
height: auto;
rotate: -1.5deg;
/* The mark is a transparent cut-out, so box-shadow would paint a rectangle
* behind the artwork. drop-shadow follows the alpha channel instead. */
filter: drop-shadow(0 1rem 2rem color-mix(in oklab, var(--jfd-ink) 18%, transparent));
transition: rotate 0.4s ease;
}
.jfd-about-mark:hover img { rotate: 0deg; }
.phpew-section--jfd-about-head [data-phpew-field="headline"],
.phpew-section--jfd-about-head [data-phpew-field="standfirst"] { grid-column: 2; }
.phpew-section--jfd-about-head [data-phpew-field="headline"] {
font-family: var(--jfd-display);
font-weight: 700;
font-size: clamp(3rem, 1rem + 8vw, 8rem);
line-height: 0.85;
letter-spacing: -0.045em;
text-transform: lowercase;
color: var(--jfd-accent);
margin: 0;
align-self: end;
}
.phpew-section--jfd-about-head [data-phpew-field="standfirst"] {
font-size: clamp(1rem, 0.95rem + 0.4vw, 1.35rem);
line-height: 1.45;
color: var(--jfd-muted);
max-width: 34ch;
margin-top: 1rem;
align-self: start;
}
/* Below the mark's own width the two columns stop being a pairing and start
being a squeeze. Stack, and let the mark lead. */
@media (max-width: 48rem) {
.phpew-section--jfd-about-head { grid-template-columns: 1fr; }
.jfd-about-mark {
grid-row: auto;
width: clamp(11rem, 62vw, 20rem);
margin-bottom: 1.5rem;
}
.phpew-section--jfd-about-head [data-phpew-field="headline"],
.phpew-section--jfd-about-head [data-phpew-field="standfirst"] { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
.jfd-about-mark img { transition: none; rotate: 0deg; }
}
#jfd-about-header-mark {
/* The box has to hold its size before the file arrives: a lazily loaded
image in a zero-height flex item never enters the viewport, so it never
loads, so it stays zero-height. */
width: 100%;
height: 100%;
aspect-ratio: 1;
max-width: 100%;
object-fit: contain;
transform: none;
z-index: auto;
opacity: 1;
}
.phpew-content--jfd-about-header {
display: grid;
grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: clamp(1.5rem, 4vw, 3.5rem);
row-gap: 0.5rem;
align-items: center;
max-width: var(--jfd-max);
margin-inline: auto;
transform: none;
}
.phpew-content--jfd-about-header > div.jfd-about-mark {
grid-column: 1;
grid-row: 1 / span 2;
display: flex;
align-items: center;
justify-content: center;
width: min(20rem, 100%);
aspect-ratio: 1;
transform: none;
}
#jfd-about-header-headline {
grid-column: 2;
grid-row: 1;
align-self: end;
display: block;
margin: 0;
transform: none;
}
#jfd-about-header-standfirst {
grid-column: 2;
grid-row: 2;
align-self: start;
display: block;
width: 100%;
transform: none;
}
@media (max-width: 767px) {
.phpew-content--jfd-about-header {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
justify-items: start;
}
.phpew-content--jfd-about-header > div.jfd-about-mark {
grid-column: 1;
grid-row: 1;
width: min(14rem, 60%);
}
#jfd-about-header-headline { grid-column: 1; grid-row: 2; }
#jfd-about-header-standfirst { grid-column: 1; grid-row: 3; }
}
.phpew-content--jfd-about-body > div.phpew-section-markdown.phpew-section-markdown--jfd-about-body > p:nth-of-type(1) {
background: #f5f1e8bc;
z-index: 2;
position: relative;
}
/* ── 12. Contests ────────────────────────────────────────────────────────── */
/* One card per contest, laid out as a single wrapping flex row: the pieces that
* want a line of their own claim the full width, and the short facts (opens,
* closes, prize, fee, theme) fall into a strip together. `order` sets the
* reading order here rather than the template's field order, so an editor can
* add a field later without the page rearranging itself. Their labels are
* generated text: the renderer emits the value alone, and a bare date with no
* word in front of it is a riddle. */
.phpew-section--jfd-contest {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: 1.5rem;
row-gap: 1rem;
max-width: var(--jfd-max);
margin-inline: auto;
margin-block-end: clamp(2.5rem, 6vw, 4rem);
padding: clamp(1.75rem, 4vw, 3.25rem);
background: var(--jfd-paper);
border: 1px solid color-mix(in srgb, var(--jfd-fg) 16%, transparent);
border-radius: 2px;
}
.phpew-section--jfd-contest > * { flex: 1 0 100%; }
.phpew-section--jfd-contest [data-phpew-field="name"] {
order: 1;
flex: 1 1 auto;
margin: 0;
font-family: var(--jfd-display);
font-size: clamp(2rem, 5.5vw, 3.4rem);
font-weight: 700;
line-height: 1.02;
letter-spacing: -0.01em;
color: var(--jfd-accent);
text-transform: lowercase;
}
/* The status is the first thing an editor changes and the first thing a
* visitor needs, so it rides beside the title rather than under it. */
.phpew-section--jfd-contest [data-phpew-field="status"] {
order: 2;
flex: 0 0 auto;
align-self: center;
padding: 0.3rem 0.85rem;
border: 1px solid currentColor;
border-radius: 999px;
font-family: var(--jfd-text);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--jfd-muted);
}
.phpew-section--jfd-contest:has([data-phpew-field="status"]) [data-phpew-field="status"] { white-space: nowrap; }
.phpew-section--jfd-contest [data-phpew-field="standfirst"] {
order: 3;
margin: 0;
font-size: clamp(1.05rem, 2.2vw, 1.35rem);
line-height: 1.45;
color: var(--jfd-fg);
border-block-end: 1px solid color-mix(in srgb, var(--jfd-fg) 14%, transparent);
padding-block-end: 1.25rem;
}
/* The facts strip. */
.phpew-section--jfd-contest [data-phpew-field="opens"],
.phpew-section--jfd-contest [data-phpew-field="closes"],
.phpew-section--jfd-contest [data-phpew-field="prize"],
.phpew-section--jfd-contest [data-phpew-field="fee"],
.phpew-section--jfd-contest [data-phpew-field="theme"] {
flex: 0 0 auto;
margin: 0;
font-family: var(--jfd-text);
font-size: 0.95rem;
line-height: 1.3;
color: var(--jfd-fg);
}
.phpew-section--jfd-contest [data-phpew-field="opens"] { order: 4; }
.phpew-section--jfd-contest [data-phpew-field="closes"] { order: 5; }
.phpew-section--jfd-contest [data-phpew-field="prize"] { order: 6; }
.phpew-section--jfd-contest [data-phpew-field="fee"] { order: 7; }
.phpew-section--jfd-contest [data-phpew-field="theme"] { order: 8; }
.phpew-section--jfd-contest [data-phpew-field="opens"]::before { content: "opens "; }
.phpew-section--jfd-contest [data-phpew-field="closes"]::before { content: "closes "; }
.phpew-section--jfd-contest [data-phpew-field="prize"]::before { content: "prize "; }
.phpew-section--jfd-contest [data-phpew-field="fee"]::before { content: "reading fee "; }
.phpew-section--jfd-contest [data-phpew-field="theme"]::before { content: "theme "; }
.phpew-section--jfd-contest [data-phpew-field="opens"]::before,
.phpew-section--jfd-contest [data-phpew-field="closes"]::before,
.phpew-section--jfd-contest [data-phpew-field="prize"]::before,
.phpew-section--jfd-contest [data-phpew-field="fee"]::before,
.phpew-section--jfd-contest [data-phpew-field="theme"]::before {
display: block;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--jfd-muted);
}
.phpew-section--jfd-contest [data-phpew-field="body"] {
order: 9;
max-width: 62ch;
font-size: 1.02rem;
line-height: 1.6;
}
.phpew-section--jfd-contest [data-phpew-field="body"] h2 {
font-family: var(--jfd-display);
font-size: clamp(1.15rem, 2.4vw, 1.5rem);
text-transform: lowercase;
color: var(--jfd-accent-2);
margin: 2em 0 0.6em;
}
.phpew-section--jfd-contest [data-phpew-field="body"] p { margin: 0 0 1.2em; }
.phpew-section--jfd-contest [data-phpew-field="body"] strong { color: var(--jfd-accent); }
/* Entering is the point of the page, so the link is a target, not a sentence. */
.phpew-section--jfd-contest [data-phpew-field="submit_url"] {
order: 10;
flex: 0 0 auto;
display: inline-block;
padding: 0.9rem 2.25rem;
background: var(--jfd-accent);
color: var(--jfd-paper);
font-family: var(--jfd-display);
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: lowercase;
text-decoration: none;
border-radius: 999px;
transition: background 120ms ease, transform 120ms ease;
}
.phpew-section--jfd-contest [data-phpew-field="submit_url"]:hover {
background: var(--jfd-accent-2);
transform: translateY(-1px);
}
.phpew-section--jfd-contest [data-phpew-field="submit_url"]:focus-visible {
outline: 3px solid var(--jfd-accent-2);
outline-offset: 3px;
}
/* The judge is a person, so their name and their life sit together, set apart
* from the call the way a contributor note sits apart from a piece. */
.phpew-section--jfd-contest [data-phpew-field="judge"] {
order: 11;
flex: 1 0 100%;
margin: 1.5rem 0 0;
font-family: var(--jfd-display);
font-size: 1.25rem;
font-weight: 700;
color: var(--jfd-fg);
}
.phpew-section--jfd-contest [data-phpew-field="judge"]::before {
content: "judged by";
display: block;
font-family: var(--jfd-text);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--jfd-muted);
margin-block-end: 0.25rem;
}
.phpew-section--jfd-contest [data-phpew-field="judge_bio"] {
order: 12;
max-width: 58ch;
margin: 0;
font-size: 0.92rem;
line-height: 1.55;
color: var(--jfd-muted);
}
.phpew-section--jfd-contest [data-phpew-field="judge_bio"] p { margin: 0 0 0.9em; }
.phpew-section--jfd-contest [data-phpew-field="contact"] {
order: 13;
margin: 0.5rem 0 0;
padding-block-start: 1.25rem;
border-block-start: 1px solid color-mix(in srgb, var(--jfd-fg) 14%, transparent);
font-size: 0.9rem;
color: var(--jfd-muted);
}
.phpew-section--jfd-contest [data-phpew-field="contact"]::before {
content: "questions ";
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* A closed contest should not shout in the accent colour or invite entries. */
.phpew-section--jfd-contest:has([data-phpew-field="status"]:not(:empty)) { --jfd-contest-live: 1; }
.phpew-page--contests .phpew-section--jfd-contest + .phpew-section--jfd-contest { margin-block-start: 0; }
@media (max-width: 767px) {
.phpew-section--jfd-contest { column-gap: 1rem; }
.phpew-section--jfd-contest [data-phpew-field="submit_url"] { flex: 1 0 100%; text-align: center; }
}