/* ===================================================================
MOBILE + FORMATTING PASS
Loads after style.css. Nothing here is page-specific: every rule
targets a pattern that repeats across the nine case pages.
Four fixes, in order of how much they change:
1. .tier collision style.css declares .tier twice — once as a
numbered grid row, once as a small right-
aligned uppercase label. Both apply, so every
numbered row inherits the label's caps,
right-align, and .24em tracking. That is why
the process lists read as shouting.
2. cqw spacing the deck's margins are in cqw. At 1180px
2cqw is 24px; at 390px it is 8px. Every
vertical gap compresses ~3x on a phone. Below
900px the scale is restated in px.
3. forced stacking the 900px breakpoint blocks every grid,
including the ones that carry meaning as a
row (a four-band score scale, a metric set).
Those are restored, resized to fit.
4. hierarchy section heads sat within 5px of the card
titles beneath them.
=================================================================== */
/* -------------------------------------------------------------------
1. .tier — cancel the label typography on numbered rows
------------------------------------------------------------------- */
.tier:not(.t1):not(.t2):not(.t3){
text-align:left;
text-transform:none;
letter-spacing:normal;
font-size:inherit;
}
/* the number itself keeps its serif treatment, just not the tracking */
.tier:not(.t1):not(.t2):not(.t3) .no{letter-spacing:normal;text-transform:none}
/* h3 inside a row wants its own tracking back, not the label's */
.tier:not(.t1):not(.t2):not(.t3) h3{letter-spacing:.02em;text-transform:none;text-align:left}
.tier:not(.t1):not(.t2):not(.t3) p,
.tier:not(.t1):not(.t2):not(.t3) .small{text-align:left;text-transform:none;letter-spacing:normal}
/* -------------------------------------------------------------------
4. section head vs card title
------------------------------------------------------------------- */
.sec-head{padding-bottom:30px}
.sec-head .s-eyebrow{
display:block;padding-top:20px;
border-top:2px solid var(--ink);
}
.sec-head h2{font-size:clamp(34px,4.6vw,54px);margin-top:14px}
.sec-head p{margin-top:4px}
/* ===================================================================
BELOW 900px
=================================================================== */
@media (max-width:900px){
/* -----------------------------------------------------------------
2. vertical rhythm, restated in px
Inline cqw margins are in the markup, so these need !important.
Scale: 8 / 16 / 24 / 32.
----------------------------------------------------------------- */
.block .pad{padding:32px 22px !important}
.block .top{margin-bottom:24px !important}
.block h2{margin-bottom:14px !important}
.block .kick{margin-bottom:9px !important}
.block p{margin-bottom:18px !important}
.block p:last-child{margin-bottom:0 !important}
.block .lede{margin-bottom:20px !important}
/* label + paragraph pairs: tight inside, open between */
.block .spec,
.block .metric,
.block .stream{padding-top:14px !important;margin-bottom:24px !important}
.block .spec .h{margin-bottom:7px !important}
.block .spec:last-child,
.block .metric:last-child{margin-bottom:0 !important}
.block .small{margin-top:10px !important}
.block .hr{margin:26px 0 !important}
.block ul.dash{margin-bottom:20px !important}
.block ul.dash li{margin-bottom:9px !important;padding-left:16px !important}
.block ul.dash li:before{top:10px;width:9px}
/* stacked grid children: the gap between groups */
.block .cols2 > * + *,
.block .cols3 > * + *,
.block .cols4 > * + *,
.block .split > * + *,
.block .split-w > * + *{margin-top:32px !important}
.block .cols2,.block .cols3,.block .cols4,
.block .split,.block .split-w{margin-bottom:28px !important}
.block .artifact{margin-top:26px !important;margin-bottom:0 !important}
.block .artifact + .artifact{margin-top:32px !important}
.block .artifact .cap{margin-top:11px !important}
.block .trow{padding:15px 0 !important}
.block .trow .d{margin-bottom:6px}
.block .trow .e{margin-bottom:5px}
/* numbered rows only. .trow > .tier is a label and takes no padding. */
.block .tier:not(.t1):not(.t2):not(.t3){padding:15px 0 !important}
.block .tier:not(.t1):not(.t2):not(.t3) h3{margin-bottom:5px}
.block .trow > .tier{padding:0 !important}
/* -----------------------------------------------------------------
3a. score bands stay a row
A four-tier scale is one object. Stacked, it reads as four
unrelated numbers and eats four screens.
----------------------------------------------------------------- */
.block .cols4:has(> .metric.sm){
display:grid !important;
grid-template-columns:repeat(4,1fr) !important;
gap:9px !important;
}
.block .cols4:has(> .metric.sm) > * + *{margin-top:0 !important}
.block .cols4 > .metric.sm{padding-top:9px !important;margin-bottom:0 !important}
.block .cols4 > .metric.sm .k{
font-size:8.5px !important;letter-spacing:.06em !important;
line-height:1.2;margin-bottom:4px !important;
}
.block .cols4 > .metric.sm .n{font-size:17px !important;line-height:1}
@media (max-width:360px){
.block .cols4 > .metric.sm .n{font-size:15px !important}
.block .cols4 > .metric.sm .k{font-size:8px !important}
}
/* -----------------------------------------------------------------
3b. outcome metrics become compact rows
Numeral left, label and description right. Same information,
roughly a third of the height, and the description keeps a
readable measure instead of being squeezed into a column.
----------------------------------------------------------------- */
.block .cols3:has(> .metric):not(:has(> .metric.sm)),
.block .cols4:has(> .metric):not(:has(> .metric.sm)){display:block !important}
.block .cols3 > .metric:not(.sm),
.block .cols4 > .metric:not(.sm){
display:grid !important;
grid-template-columns:minmax(64px,auto) 1fr;
column-gap:18px;row-gap:2px;
align-items:baseline;
padding-top:13px !important;
margin-top:20px !important;margin-bottom:0 !important;
}
.block .cols3 > .metric:not(.sm):first-child,
.block .cols4 > .metric:not(.sm):first-child{margin-top:0 !important}
.block .cols3 > .metric:not(.sm) .n,
.block .cols4 > .metric:not(.sm) .n{
grid-column:1;grid-row:1 / span 2;
font-size:37px !important;line-height:.88;align-self:start;
}
.block .cols3 > .metric:not(.sm) .k,
.block .cols4 > .metric:not(.sm) .k{
grid-column:2;grid-row:1;margin-bottom:3px !important;
}
.block .cols3 > .metric:not(.sm) .small,
.block .cols4 > .metric:not(.sm) .small{
grid-column:2;grid-row:2;margin-top:0 !important;
font-size:13px !important;line-height:1.45 !important;
}
/* -----------------------------------------------------------------
method chips: air above and below, and a real tap target
----------------------------------------------------------------- */
.block .brands{
display:flex !important;flex-wrap:wrap;
gap:8px !important;
margin:18px 0 30px !important;
}
.block .brands span{
font-size:12px !important;letter-spacing:.02em !important;
padding:7px 11px;line-height:1.15;
}
/* -----------------------------------------------------------------
the four-up sharing principles: two-up reads better than one-up
----------------------------------------------------------------- */
.block .cols4:has(> .spec){
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:22px 18px !important;
}
.block .cols4:has(> .spec) > * + *{margin-top:0 !important}
.block .cols4 > .spec{margin-bottom:0 !important}
@media (max-width:420px){
.block .cols4:has(> .spec){grid-template-columns:1fr !important}
}
/* -----------------------------------------------------------------
2b. type the original breakpoint missed
style.css restates most cqw sizes in px below 900px, but a few
selectors were never listed, and 143 inline font-size:Ncqw
declarations in the markup match no selector at all. Those render
at 3-6px on a phone. Measured sizes are in the comments.
----------------------------------------------------------------- */
/* step numbers and counts in .tier rows — was 5.5px */
.block .tier{grid-template-columns:24px 1fr !important;column-gap:12px !important}
.block .tier .no{
font-size:13px !important;line-height:1.3 !important;
letter-spacing:.02em !important;
}
/* provenance line on evidence cards — was 3.2px */
.block .card .pv{font-size:12.5px !important;line-height:1.5 !important}
.block .card .pv b{font-size:12.5px !important;letter-spacing:.02em !important}
/* unclassed matrix cells — was 3.7px */
.mx-scroll .mx > div:not([class]){font-size:12.5px !important;line-height:1.45 !important}
/* any inline cqw size on an element carrying no class of its own */
.block div[style*="cqw"]:not([class]),
.block span[style*="cqw"]:not([class]){
font-size:15px !important;line-height:1.55 !important;
}
/* score band labels: 8.5px was too tight to read at a glance */
.block .cols4 > .metric.sm .k{font-size:9.5px !important}
/* -----------------------------------------------------------------
4. hierarchy on small screens
----------------------------------------------------------------- */
.sec-head{padding-bottom:26px}
.sec-head h2{font-size:34px !important;margin-top:12px}
.sec-head p{font-size:15.5px}
.card h3{font-size:21px}
.block h2{font-size:25px !important}
/* -----------------------------------------------------------------
case hero: the discipline rail now lives here
----------------------------------------------------------------- */
.ch-meta{gap:7px 20px}
.ch-rail{gap:7px 16px !important}
.ch-rail span{font-size:10.5px !important;letter-spacing:.16em !important}
}
/* ===================================================================
DISCIPLINE RAIL IN THE CASE HERO
Moved out of the first content block, where it sat above THE PROBLEM
as an unlabelled row of tags. In the hero it joins the metadata that
was already there.
=================================================================== */
.ch-rail{
display:flex;flex-wrap:wrap;gap:8px 24px;
margin-top:14px;padding-top:14px;
border-top:1px solid rgba(245,242,238,.16);
}
.ch-rail span{
font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11.5px;
letter-spacing:.2em;text-transform:uppercase;color:#5E5750;
}
.ch-rail span.on{color:var(--gray-ink)}
/* ===================================================================
ARTIFACT DISCLOSURES (progressive enhancement, see enhance.js)
Below 900px each .trow collapses to its title and tag, and opens on
tap. Without JS the rows stay exactly as they are now.
=================================================================== */
@media (max-width:900px){
.block .trow.is-collapsible{
display:grid !important;
grid-template-columns:1fr auto;
grid-template-rows:auto auto;
align-items:baseline;
column-gap:14px;row-gap:0 !important;
cursor:pointer;
padding:0 !important;
}
.block .trow.is-collapsible > .d{
grid-column:1;grid-row:1;
padding:14px 0 0 !important;margin:0 !important;
line-height:1.2;
}
.block .trow.is-collapsible > .tier{
grid-column:2;grid-row:1;
padding:14px 0 0 !important;margin:0 !important;
text-align:right !important;line-height:1.2;
}
.block .trow.is-collapsible > .e{
grid-column:1 / -1;grid-row:2;
display:grid;grid-template-rows:0fr;
transition:grid-template-rows .22s ease;
margin:0 !important;
}
.block .trow.is-collapsible > .e > span{
overflow:hidden;display:block;min-height:0;
}
.block .trow.is-collapsible[data-open] > .e{grid-template-rows:1fr}
.block .trow.is-collapsible > .e > span > .e-body{
display:block;padding-bottom:15px;
}
/* the affordance */
.block .trow.is-collapsible > .d{
position:relative;padding-right:26px;
}
.block .trow.is-collapsible > .d:after{
content:"";position:absolute;right:6px;top:calc(50% + 6px);
width:8px;height:8px;border-right:1.5px solid var(--gray-lt);
border-bottom:1.5px solid var(--gray-lt);
transform:translateY(-50%) rotate(45deg);
transition:transform .22s ease;
}
.block .trow.is-collapsible[data-open] > .d:after{
transform:translateY(-50%) rotate(-135deg);
}
.ink .trow.is-collapsible > .d:after{border-color:#5E5750}
.block .trow.is-collapsible:not([data-open]){padding-bottom:15px !important}
}
@media (prefers-reduced-motion:reduce){
.block .trow.is-collapsible > .e,
.block .trow.is-collapsible > .d:after{transition:none}
}
/* ===================================================================
ZOOM AFFORDANCE
.plate already links to the full image. .panel and .artifact images
did not signal that they could be opened; now they do.
=================================================================== */
[data-cmd-zoomable]{cursor:zoom-in}
.artifact .panel{position:relative}
.artifact .panel:after{
content:"Tap to enlarge";
position:absolute;right:0;bottom:0;
font-family:'Barlow Condensed',sans-serif;font-weight:600;
font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--gray);background:rgba(255,255,255,.92);
padding:5px 8px;pointer-events:none;opacity:0;transition:opacity .16s;
}
.artifact .panel:has(img[data-cmd-zoomable]):after{opacity:1}
@media (hover:hover){
.artifact .panel:has(img[data-cmd-zoomable]):after{opacity:0}
.artifact .panel:has(img[data-cmd-zoomable]):hover:after{opacity:1;content:"Click to enlarge"}
}
/* ===================================================================
GROUPED BRANDS AND CLIENTS (About)
A flat chip list of 19 read as one employer's portfolio. Grouping by
sector shows the range and lets non-beauty work sit alongside it
without being lost in the middle of an alphabetical run.
=================================================================== */
.brand-group + .brand-group{margin-top:22px}
.bg-label{
font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;
letter-spacing:.22em;text-transform:uppercase;color:var(--gray);
display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
padding-bottom:9px;border-bottom:1px solid var(--rule);
}
.bg-label i{
font-family:'EB Garamond',serif;font-style:italic;font-weight:400;
font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--gray-lt);
}
.brand-group .brands{margin-top:12px}
@media (max-width:900px){
.brand-group + .brand-group{margin-top:26px}
.bg-label{font-size:10.5px;letter-spacing:.18em;padding-bottom:8px}
.bg-label i{font-size:12px}
.brand-group .brands{margin:11px 0 0 !important}
}
/* ===================================================================
DOGS HEADER (About)
The block opened straight onto two photographs with no label, so it
read as an orphan under the poetry section. The rule that was on
.dogs moves up to the header so the header owns the section break.
=================================================================== */
.dogs-head{
margin-top:38px;padding-top:26px;
border-top:1px solid var(--rule);
}
.dogs-head h2{
font-family:'Barlow Condensed',sans-serif;font-weight:600;
font-size:clamp(21px,2.5vw,29px);line-height:1.05;
letter-spacing:-.005em;max-width:24ch;
}
.dogs{margin-top:22px !important;padding-top:0 !important;border-top:0 !important}
@media (max-width:900px){
.dogs-head{margin-top:30px;padding-top:22px}
.dogs-head h2{font-size:22px}
.dogs{margin-top:18px !important}
}
/* ===================================================================
SPOT ILLUSTRATIONS (Writing)
Drawn rather than generated, so they carry the site's own palette
and hairline weight. Each one is the essay's own metaphor: the
unsigned letter, the moon's phases, the flattened verbatim.
=================================================================== */
.spot-fig{margin:30px 0 26px;padding:0}
.spot{width:100%;height:auto;display:block;background:var(--bone);padding:18px 0}
.feature.alt .spot,.why .spot{background:transparent}
.spot-fig figcaption{
font-size:13.5px;line-height:1.55;color:var(--gray);
margin-top:12px;max-width:62ch;
}
/* 1 — the unsigned letter, in the Signed by No One identity
---------------------------------------------------------------
SWAP ONE LINE: --sbno-accent is a placeholder. Replace it with the
rust/terracotta from the Substack banner and the strike, the tagline
and the signature line all update together.
--------------------------------------------------------------- */
:root{ --sbno-accent:#B4552F; --sbno-void:#0E0C0B; }
.spot-sbno{background:transparent;padding:0}
.sp-void{fill:var(--sbno-void)}
.sp-field rect{fill:#F5F2EE}
.sp-page{fill:#F5F2EE;stroke:none}
.sp-rule,.sp-rule-hd{stroke:#ADA79F;stroke-width:2;stroke-linecap:round}
.sp-rule-hd{stroke:var(--ink);stroke-width:3}
.sp-sign{stroke:#ADA79F;stroke-width:1.4}
.sp-strike{stroke:var(--sbno-accent);stroke-width:2.4;stroke-linecap:round}
.sp-tag{
font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;
letter-spacing:.34em;fill:var(--sbno-accent);
}
/* 2 — moon phases */
.sp-disc{fill:none;stroke:var(--ink);stroke-width:1.3}
.sp-lit{fill:var(--ink)}
/* 3 — the compressed signal */
.sp-axis{stroke:var(--rule);stroke-width:1}
.sp-wave{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
.sp-dot{fill:var(--accent)}
.sp-dot-end{fill:var(--gray-lt)}
@media (max-width:900px){
.spot-fig{margin:24px 0 22px}
.spot{padding:14px 0}
.spot-fig figcaption{font-size:12.5px;margin-top:10px;max-width:none}
.sp-field rect{opacity:.5}
}
/* ===================================================================
HOMEPAGE — HERO STATS AS COMPACT ROWS
Five stats at one per row is roughly 1,850px of scrolling before the
work grid appears. Same treatment as the case-page metrics: numeral
left, label and description right. The set stays a set.
=================================================================== */
@media (max-width:900px){
.hero .stats-in,.stats .stats-in{display:block !important}
.stats-in > .stat{
display:grid !important;
grid-template-columns:minmax(58px,auto) 1fr;
column-gap:18px;row-gap:2px;
align-items:baseline;
padding-top:13px !important;margin-top:18px !important;
}
.stats-in > .stat:first-child{margin-top:0 !important}
.stats-in > .stat .n{
grid-column:1;grid-row:1 / span 2;
font-size:36px !important;line-height:.88;
margin-bottom:0 !important;align-self:start;
}
.stats-in > .stat .k{grid-column:2;grid-row:1;margin-bottom:3px !important}
.stats-in > .stat .d{
grid-column:2;grid-row:2;
font-size:13px !important;line-height:1.45;max-width:none;
}
}
/* ===================================================================
HOMEPAGE — TEASE COLUMNS GAIN AN IMAGE
Both columns were type only, so the section read as a wall between
the work grid and the footer. About takes the portrait; Writing
takes the book object plus a live count, because the newsletter has
no cover image and a fabricated one would be worse than none.
=================================================================== */
.t-shot{margin:0 0 24px;overflow:hidden;background:var(--paper)}
.t-shot img{
width:100%;height:auto;display:block;
aspect-ratio:4/3;object-fit:cover;object-position:center 22%;
filter:grayscale(1) contrast(1.05);
transition:filter .3s ease;
}
.t-col:hover .t-shot img{filter:grayscale(.15) contrast(1.02)}
.t-shot--book{display:flex;align-items:stretch;gap:22px}
.t-shot--book .bk-cover{width:132px;flex:none;aspect-ratio:2/3;padding:16px 14px}
.t-shot--book .bk-title{font-size:27px}
.t-shot--book .bk-imprint,.t-shot--book .bk-byline{font-size:9px;letter-spacing:.2em}
.t-stack{display:flex;flex-direction:column;justify-content:flex-end;
border-top:2px solid var(--ink);padding-top:12px;flex:1;min-width:0}
.t-stack-l{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:10.5px;
letter-spacing:.22em;text-transform:uppercase;color:var(--gray)}
.t-stack-n{font-family:'Barlow Condensed',sans-serif;font-weight:600;
font-size:46px;line-height:.86;letter-spacing:-.02em;margin:6px 0 8px}
.t-stack-d{font-size:13px;line-height:1.45;color:var(--gray)}
@media (max-width:900px){
.t-shot{margin-bottom:20px}
.t-shot img{aspect-ratio:16/10}
.t-shot--book{gap:18px}
.t-shot--book .bk-cover{width:112px;padding:14px 12px}
.t-shot--book .bk-title{font-size:23px}
.t-stack-n{font-size:38px}
.t-col + .t-col{margin-top:44px}
}
/* ===================================================================
TENTH CASE CARD (home)
The grid fakes its hairlines with a 1px gap over a rule-coloured
background, so a row that is not full leaks grey where the missing
cells would be. One paper-coloured filler closes the last row.
Hidden below 900px, where the grid is a single column.
=================================================================== */
.card-fill{background:var(--paper);grid-column:span 1}
@media (max-width:900px){ .card-fill{display:none} }
/* ---- Writing tease: two objects, book and newsletter (build 21) ---- */
/* The shared white plate is dropped here. It was sized for a full-bleed photo
and left a large empty field beside the cover. .t-stack rules above are unused. */
.t-shot--book{background:transparent;overflow:visible;margin:0 0 24px;
display:grid;grid-template-columns:168px 1fr;gap:24px;align-items:stretch}
.bk-one{display:flex;flex-direction:column;margin:0}
.t-shot--book .bk-cover{width:100%;flex:none;aspect-ratio:2/3;padding:18px 15px}
.t-shot--book .bk-title{font-size:32px}
.t-shot--book .bk-imprint,.t-shot--book .bk-byline{font-size:9.5px;letter-spacing:.2em}
.bk-note{margin-top:10px;font-family:'Barlow Condensed',sans-serif;font-weight:600;
font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gray);line-height:1.35}
/* Drop-in slot for the real cover: swap the .bk-cover div for
*/
.bk-img{display:block;width:100%;height:auto}
.news{background:var(--paper);border-top:2px solid var(--ink);
padding:17px 19px 19px;display:flex;flex-direction:column}
.news-mark{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12.5px;
letter-spacing:.26em;text-transform:uppercase;color:var(--ink);line-height:1.25}
/* Drop-in slot for the real wordmark: nest an ![]()
inside .news-mark */
.news-mark img{display:block;width:100%;max-width:210px;height:auto}
.news-d{font-size:13px;line-height:1.45;color:var(--gray);margin-top:9px}
.news-n{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:46px;
line-height:.86;letter-spacing:-.02em;color:var(--ink);margin-top:auto;padding-top:18px}
.news-lab{font-size:12.5px;line-height:1.4;color:var(--gray);margin-top:6px}
@media (max-width:900px){
.t-shot--book{grid-template-columns:132px 1fr;gap:18px;margin-bottom:20px}
.t-shot--book .bk-cover{padding:14px 12px}
.t-shot--book .bk-title{font-size:26px}
.t-shot--book .bk-imprint,.t-shot--book .bk-byline{font-size:9px}
.bk-note{font-size:10px;letter-spacing:.14em}
.news{padding:14px 15px 16px}
.news-mark{font-size:11px;letter-spacing:.22em}
.news-d{font-size:12.5px}
.news-n{font-size:36px;padding-top:14px}
.news-lab{font-size:12px}
}
/* ---- About: capability + platform matrix (build 22) ---- */
.capset{margin-top:52px}
.capset--half{max-width:640px}
.capgrid{display:grid;grid-template-columns:repeat(2,1fr);
gap:30px clamp(30px,5vw,72px);margin-top:20px}
.capgrid--plat{grid-template-columns:repeat(3,1fr)}
.capgroup{border-top:2px solid var(--ink);padding-top:12px}
.cap-lab{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11.5px;
letter-spacing:.24em;text-transform:uppercase;color:var(--gray);
line-height:1.25;margin-bottom:4px}
.capgroup ul.plain{margin-top:6px}
.capgroup ul.plain li{font-size:15px;padding:8px 0}
.capgroup ul.plain li:last-child{border-bottom:none}
.cap-run{font-size:15px;line-height:1.55;color:#33362F;padding:8px 0 0}
@media (max-width:900px){
.capset{margin-top:40px}
.capgrid,.capgrid--plat{grid-template-columns:1fr;gap:26px}
.capgroup ul.plain li{font-size:14.5px}
.cap-run{font-size:14.5px}
.cap-lab{font-size:10.5px;letter-spacing:.2em}
}
/* ---- About: signature lockup (build 23) ---- */
.sig{border-top:1px solid var(--rule);padding:44px 0 8px}
.sig-in{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,64px);
display:flex;justify-content:center}
.sig-mark{display:block;width:74px;height:auto}
@media (max-width:900px){
.sig{padding:34px 0 4px}
.sig-mark{width:62px}
}
/* ---- Homepage: organisation marks module (build 24) ---- */
/* Set as text wordmarks at one optical weight. To use a real logo file for any
cell, drop an ![]()
inside that .org and delete its :
Everything else — cell size, alignment, monochrome treatment — already holds. */
.orgs{border-top:1px solid var(--rule);background:var(--bone);
padding:clamp(40px,6vw,64px) 0}
.orgs-in{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,64px)}
.org-grid{display:grid;grid-template-columns:repeat(4,1fr);
gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:20px}
.org{background:var(--bone);display:flex;align-items:center;justify-content:center;
min-height:84px;padding:16px 14px;text-align:center}
.org span{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13px;
letter-spacing:.2em;text-transform:uppercase;color:var(--gray);line-height:1.3}
.org img{display:block;max-width:100%;max-height:34px;width:auto;height:auto;
filter:grayscale(1);opacity:.62}
.orgs-note{margin-top:18px;font-size:14px;line-height:1.55;color:var(--gray);max-width:66ch}
@media (max-width:900px){
.org-grid{grid-template-columns:repeat(2,1fr)}
.org{min-height:72px;padding:14px 12px}
.org span{font-size:11.5px;letter-spacing:.16em}
.org img{max-height:28px}
.orgs-note{font-size:13.5px}
}
/* ---- Accent: green -> purple (build 25) ---------------------------------
style.css line 409 already defines the accent system and 17 rules consume
it. Overriding the two variables here recolours all of them; style.css is
untouched. To tune, change these two values only.
--accent deep orchid 7.25:1 on bone, 8.25:1 on paper
--accent-ink light orchid 7.58:1 on ink (for dark blocks)
Alternatives measured and passing: #52304F plum (warmer, heavier),
#5B3E8E violet (cooler), #6B4E71 mauve (quieter). */
:root{ --accent:#63407A; --accent-ink:#B49BC8; }
/* The accent was almost entirely bound to :hover, which is why the site read
as fully monochrome. These four are persistent rather than on hover. */
::selection{background:var(--accent);color:#FFFFFF}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.c-no{color:var(--accent)}
.ch-no{color:var(--accent)}
/* ---- Writing hero: author photo (build 26) ----
Deliberately not .has-portrait. That pattern bleeds a 2:3 portrait to the
section floor; this image is square, so it is sized and centred instead. */
.wr-split{display:grid;grid-template-columns:1fr 340px;
gap:clamp(30px,5vw,72px);align-items:center}
.wr-portrait{margin:0}
.wr-portrait img{width:100%;height:auto;display:block;filter:contrast(1.04)}
@media (max-width:900px){
.wr-split{grid-template-columns:1fr;gap:28px}
.wr-portrait{max-width:260px}
}
