/* Theme Name: Speak Up Magazine Theme URI: https://speakupmag.org Author: Speak Up Description: The magazine. Design is theme code; every sentence and picture is a block. Version: 0.1.0 Requires at least: 6.5 Tested up to: 7.1 Requires PHP: 8.1 Text Domain: speakupmag */ /* ══ Register ══ Instrument Serif over DM Sans at Renovare's settings. */ :root{--su-ink:#1a1a1a;--su-body:#374151;--su-mute:#767676;--su-red:#bf1e2d; --su-deep:#8f1420;--su-rule:#e8e6e2;--su-paper:#fff;--su-gx:clamp(20px,4vw,56px); /* ══ The picture treatment — four knobs, tune these and nothing else ══ His 2026-09-06: "add some sort of overlay - a bit of color gradient, and some sort of abstract spotty dotty overlay or something to make them less rigid." */ --su-duo:.72; /* duotone strength on the grids. 0 = plain black and white */ --su-artsat:.45; /* how much colour the ARTICLE hero keeps. 1 = untouched */ --su-artdark:.88; /* article hero brightness. 1 = untouched, lower = darker */ --su-duo-plate:.72} /* the square plate beside the index list */ html{-webkit-font-smoothing:antialiased} body{margin:0;background:var(--su-paper);color:var(--su-body); font:400 18.4px/1.6 'DM Sans',system-ui,sans-serif} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} .su-w{max-width:1240px;margin:0 auto} .su-body{padding:0 var(--su-gx)} /* ══ Header ══ */ .su-nav{display:flex;justify-content:space-between;align-items:center;gap:22px; padding:32px var(--su-gx) 0} .su-nav img{height:32px;width:auto} .su-nav .su-links{display:flex;gap:22px;font-size:15px;color:var(--su-mute)} .su-nav .su-links a:hover{color:var(--su-ink)} /* ⚠ The whole gap below the wordmark lives HERE, on the masthead's padding, and not on the margin of whatever copy block comes next. Core's flow layout emits `.wp-block-post-content-is-layout-flow > :first-child{margin-block-start:0}`, which outranks a class selector — so a top margin on .su-mission is silently thrown away and the since line rides up under the wordmark. Padding is untouchable by that rule and holds whether the mission line is written or not. It also has to buy back what line-height:.9 eats: the g in Magazine descends below the h1's box, so the measured gap always reads tighter than the number. */ .su-masthead{padding:clamp(26px,3.4vw,46px) var(--su-gx) clamp(34px,3.8vw,54px)} .su-masthead h1,.su-wordmark{margin:0;font-family:'Instrument Serif',Georgia,serif; font-weight:400;font-size:clamp(44px,8.2vw,124px);line-height:.9; letter-spacing:-.012em;color:var(--su-ink)} /* ══ Editable copy blocks ══ these are Gutenberg blocks, not theme strings */ /* His 2026-09-06: "fix spacing, ugly - too close". These two are a tight pair — the big gap above them is the masthead's, see the note there. */ .su-mission{font:400 clamp(21px,2.3vw,31px)/1.38 'Instrument Serif',Georgia,serif; color:var(--su-ink);max-width:32ch;margin:0 0 10px} .su-since{font-size:15px;color:var(--su-mute);max-width:48ch; margin:12px 0 clamp(46px,5vw,72px)} .su-sec{font:500 11px/1 'DM Sans',sans-serif;letter-spacing:.16em; text-transform:uppercase;color:var(--su-mute);padding-bottom:18px;margin:0} /* ══ The editor-letter band ══ His 2026-09-06: "editor letter callout should be more akin to size and style of the links" — the callout links at the foot of the page, Instrument Serif at clamp(24px,2.4vw,33px). So the band stops being a small-caps section label and becomes a line of type the size of a pointer to something worth reading. It keeps its own class rather than restyling .su-sec, which is still the small caps used for the section headings below it. The rule under it appears only on an . Underlining something that is not clickable is a lie; link the text in the editor and it picks up the same rule the callout links carry. */ .su-letterband{font:400 clamp(24px,2.4vw,33px)/1.25 'Instrument Serif',Georgia,serif; color:var(--su-ink);margin:0 0 clamp(30px,3.4vw,48px)} .su-letterband a{display:inline-block;border-bottom:1px solid var(--su-rule); padding-bottom:3px} .su-letterband a:hover{border-color:var(--su-red);color:var(--su-deep)} /* ══ Generated: the articles ══ */ .su-topics{display:flex;flex-wrap:wrap;gap:0 22px;padding:20px 0 42px; border-top:1px solid var(--su-rule);border-bottom:1px solid var(--su-rule);margin-bottom:44px} .su-topics a{font-family:'Instrument Serif',Georgia,serif;font-size:19px;line-height:1.85} .su-t{font-family:'Instrument Serif',Georgia,serif;color:var(--su-ink);display:block; letter-spacing:-.005em} .su-by{font:400 14px/1.5 'DM Sans',sans-serif;color:var(--su-mute);display:block;margin-top:4px} a:hover .su-t{color:var(--su-deep)} /* ══ The picture ══ greyscale underneath, two layers of ink on top. .su-fig is a span the mu-plugin wraps every thumbnail in, because an cannot carry ::before/::after and the overlay has to live somewhere. The span owns the aspect ratio now; the image just fills it. */ .su-fig{position:relative;display:block;overflow:hidden;background:#efefef; isolation:isolate} .su-fig img,.su-thumb{filter:grayscale(1) contrast(1.03);background:#efefef} .su-fig img{width:100%!important;height:100%!important;object-fit:cover;display:block} /* ══ Two picture treatments ══ His 2026-09-07: "i lean toward duotones maybe, reds and other colors - for the index pages and archive and home page - but maybe just slightly darkened muted normal colorized overlays on the individual pages." So the BROWSING surfaces are graphic and the READING surface is photographic. .su-fig is only ever emitted by the front-page lists, so it carries the duotone; .su-cover is only ever the article hero, so it carries the muted one. The duotone rotates through five inks so a grid of eight does not read as one flat colour wash. Change the palette here and the whole grid follows. */ .su-fig img{filter:grayscale(1) contrast(1.06)} .su-fig::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(158deg,var(--d1),var(--d2)); mix-blend-mode:color;opacity:var(--su-duo)} .su-fig{--d1:#bf1e2d;--d2:#2a1016} /* Speak Up red */ :is(.su-feats,.su-boxes,.su-sq,.su-ixgrid)>:nth-child(5n+2) .su-fig{--d1:#22406b;--d2:#0e1522} /* ink blue */ :is(.su-feats,.su-boxes,.su-sq,.su-ixgrid)>:nth-child(5n+3) .su-fig{--d1:#a8742a;--d2:#241705} /* ochre */ :is(.su-feats,.su-boxes,.su-sq,.su-ixgrid)>:nth-child(5n+4) .su-fig{--d1:#1f5c5a;--d2:#08201f} /* teal */ :is(.su-feats,.su-boxes,.su-sq,.su-ixgrid)>:nth-child(5n+5) .su-fig{--d1:#5b2140;--d2:#1c0a14} /* plum */ /* A piece's own cover photograph keeps its own tone: no duotone plate, no forced greyscale. Only the stock photography is dyed. */ .su-fig.su-real::before{display:none} .su-fig.su-real img,.su-fig.su-real .su-thumb{filter:none} /* The article hero keeps its own colour, pulled back and dropped a stop, so the piece opens on a photograph rather than a graphic. */ /* ⚠ The darkening is a FILTER on the image, not an overlay element. An ::after on the featured-image figure paints the figure's whole box, and the figure is wider than the picture inside it — which put a grey band across the page above the hero. A filter can only ever touch the pixels of the image itself. */ .su-cover img{filter:saturate(var(--su-artsat)) contrast(1.04) brightness(var(--su-artdark))} /* The square plate is its own wrapper already — same two layers, same knobs. */ .su-sq{isolation:isolate} .su-sq img{filter:grayscale(1) contrast(1.06)} /* The plate takes its ink from --d1/--d2, which plate.js rewrites as the picture changes. His 2026-09-07: "i see the images with all these have the same gradient color red - diversify them" — the rotation on the grids is done with :nth-child on the card wrappers, and the plate's children are bare elements, so it never reached here. */ .su-sq{--d1:#bf1e2d;--d2:#2a1016} .su-sq::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none; background:linear-gradient(158deg,var(--d1),var(--d2)); mix-blend-mode:color;opacity:var(--su-duo-plate);transition:background .28s ease} /* ⚠ MOBILE FIRST, and the order matters. The single-column rule is unconditional; the two-column rule lives in a min-width query further down. Written the other way round -- which is how this shipped -- an unconditional two-column rule beats the max-width query at equal specificity and the headline story renders at HALF the size of the stories beneath it on every phone. There was also a SECOND .su-lead declaration lower in this file doing exactly that; it is gone. */ .su-lead{display:grid;grid-template-columns:1fr;gap:clamp(26px,3.4vw,54px); align-items:center;padding-bottom:46px;border-bottom:1px solid var(--su-rule);margin-bottom:44px} .su-lead .su-t{font-size:clamp(30px,3.6vw,52px);line-height:1.06} .su-lead p{margin:16px 0 0;max-width:40ch} .su-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,38px); padding-bottom:46px;border-bottom:1px solid var(--su-rule);margin-bottom:44px} .su-feats .su-fig{width:100%;aspect-ratio:3/2;margin-bottom:13px} .su-feats .su-t{font-size:clamp(21px,1.9vw,27px);line-height:1.16} .su-boxes{display:grid;grid-template-columns:repeat(4,1fr);gap:34px clamp(20px,2.4vw,32px); padding-bottom:48px;border-bottom:1px solid var(--su-rule);margin-bottom:48px} .su-boxes .su-fig{width:100%;aspect-ratio:4/3;margin-bottom:12px} .su-boxes .su-t{font-size:21px;line-height:1.17} .su-split{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,4vw,64px);align-items:start} .su-list{border-top:1px solid var(--su-rule)} .su-row{display:block;padding:12px 0;border-bottom:1px solid var(--su-rule)} .su-row .su-t{font-size:clamp(20px,1.85vw,25px);line-height:1.26} .su-row .su-by{display:block;margin-left:0} .su-row.on .su-t{color:var(--su-deep)} .su-plate{position:sticky;top:28px} .su-sq{position:relative;width:100%;aspect-ratio:1;overflow:hidden;background:#efefef} .su-sq img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.03);opacity:0;transition:opacity .28s ease} .su-sq img.on{opacity:1} .su-cap{margin-top:14px;font-size:14px;color:var(--su-mute);min-height:1.5em} .su-cap b{font-family:'Instrument Serif',Georgia,serif;font-weight:400; color:var(--su-ink);font-size:19px;display:block} .su-toarch{display:flex;justify-content:space-between;align-items:baseline;padding:26px 0 0} .su-count{font:500 11px/1 'DM Sans',sans-serif;letter-spacing:.14em; text-transform:uppercase;color:var(--su-mute)} /* ══ The callout — his: centred, links close together ══ */ .su-cta{border-top:1px solid var(--su-rule);border-bottom:1px solid var(--su-rule); margin-top:clamp(60px,7vw,104px);padding:clamp(46px,5vw,74px) 0;text-align:center} .su-cta .su-ctalinks{display:flex;justify-content:center;flex-wrap:wrap; gap:clamp(26px,3.4vw,52px);margin-top:30px} .su-cta a{display:inline-block;font-family:'Instrument Serif',Georgia,serif; color:var(--su-ink);font-size:clamp(24px,2.4vw,33px); border-bottom:1px solid var(--su-rule);padding-bottom:3px} .su-cta a:hover{border-color:var(--su-red);color:var(--su-deep)} .su-foot{border-top:1px solid var(--su-rule);margin-top:64px;padding:26px var(--su-gx) 64px; display:flex;justify-content:space-between;font-size:14px;color:var(--su-mute)} @media(min-width:901px){.su-lead{grid-template-columns:1.25fr 1fr;align-items:center}} @media(max-width:900px){.su-feats,.su-split{grid-template-columns:1fr} .su-plate{position:static;margin-top:38px}.su-boxes{grid-template-columns:repeat(2,1fr)}} /* ══ The article page — f2, his decision 2026-09-05 ══ Six-track grid, wide cover, a left rail that does NOT float, read-next beside the two doors. */ /* ══ The article ══ OPTION A, his pick 2026-09-07: "i like a the best". One centred measure, no side rail, Source Serif 4 for the body. The six-track grid is gone; nothing on this page is off to one side any more. */ /* The masthead is hidden on inner pages, so an article otherwise begins immediately under the nav with nothing between them. */ .su-art{padding:clamp(60px,6.5vw,104px) clamp(24px,5.6vw,92px) 0; max-width:1240px;margin:0 auto} /* ⚠ The gap under the nav. His: "gotta fix the under nav bar spacing issue". On an inner page the masthead is hidden, so the nav contributes only its own 32px top padding and the hero landed hard against the links. This is the breathing room, and it lives on the hero rather than the nav so the front page (which has a masthead below the nav) is untouched. */ .su-cover img{width:100%;aspect-ratio:21/8;object-fit:cover;background:#efefef; margin-top:clamp(30px,3.6vw,54px)} .su-head{margin-top:clamp(34px,4vw,58px);max-width:660px;margin-left:auto;margin-right:auto; text-align:center} .su-sechead{font:500 11px/1 'DM Sans',sans-serif;letter-spacing:.16em; text-transform:uppercase;color:var(--su-mute);margin-bottom:14px} .su-art h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;color:var(--su-ink); font-size:clamp(34px,4.4vw,56px);line-height:1.1;letter-spacing:-.012em;margin:0 0 14px} .su-meta{font:500 11px/1 'DM Sans',sans-serif;letter-spacing:.16em; text-transform:uppercase;color:var(--su-mute);margin:0} .su-stand{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(20px,1.8vw,25px); line-height:1.38;color:var(--su-ink);margin:20px auto 0;max-width:34rem} .su-text{max-width:660px;margin:0 auto;padding-top:clamp(34px,4vw,52px)} .su-text p{font:400 20px/1.62 'Source Serif 4',Georgia,serif;color:#26303f; margin:0 0 1.15em;max-width:none} .su-foot{margin-top:clamp(84px,9vw,138px);padding-bottom:clamp(80px,9vw,130px); border-top:1px solid var(--su-rule);padding-top:clamp(52px,6vw,84px); display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(44px,6vw,104px)} .su-ftlabel{font:500 11px/1 'DM Sans',sans-serif;letter-spacing:.16em; text-transform:uppercase;color:var(--su-mute);margin:0 0 26px} .su-nx a{display:block;font-family:'Instrument Serif',Georgia,serif;color:#000; font-size:clamp(22px,2.1vw,29px);line-height:1.24;padding:15px 0; border-bottom:1px solid var(--su-rule)} .su-nx a:hover{color:var(--su-deep)} .su-who{font-family:'DM Sans',sans-serif;font-size:13.5px;color:var(--su-mute); display:block;margin-top:5px} .su-doors{display:grid;gap:clamp(38px,4.5vw,64px);align-content:start} .su-door p{margin:0 0 20px;max-width:34ch} @media(max-width:900px){.su-foot{grid-template-columns:1fr;gap:60px}} /* ══ Corrections found only by putting it in WordPress ══ */ /* The default "Uncategorized" term is WordPress's, not a department of this magazine. Hidden until real departments exist rather than printed as one. */ .su-sechead a[href*="uncategorized"]{display:none} .su-sechead:empty{display:none} /* Core's button defaults are a dark pill; the register has no pills. */ .su-door .wp-block-button__link{background:transparent;color:var(--su-ink); border:1px solid var(--su-rule);border-radius:0;padding:14px 24px; font-family:'DM Sans',sans-serif;font-size:15px} .su-door .wp-block-button__link:hover{border-color:var(--su-red);color:var(--su-deep)} /* The mark, once a site logo exists. */ .su-nav .wp-block-site-logo img{height:32px;width:auto} .su-nav .wp-block-navigation{font-size:15px} .su-nav .wp-block-navigation a{color:var(--su-mute)} .su-nav .wp-block-navigation a:hover{color:var(--su-ink)} /* ══ Outlined nav button ══ The paint for the block style registered in functions.php. Deliberately not keyed to Donate: whichever nav link carries the style gets the box. */ .wp-block-navigation-item.is-style-su-outline{margin-left:6px} .su-nav .wp-block-navigation .is-style-su-outline a, .wp-block-navigation-item.is-style-su-outline a{ border:1px solid var(--su-red);color:var(--su-red); padding:7px 15px;line-height:1; transition:background-color .15s ease,color .15s ease} .su-nav .wp-block-navigation .is-style-su-outline a:hover, .wp-block-navigation-item.is-style-su-outline a:hover{ background:var(--su-red);color:var(--su-paper)} /* ══ Donorbox ══ his 2026-09-06: "add a live donorbox box". The iframe sizes itself by postMessage, so it gets a floor rather than a fixed height. */ .su-donorbox{margin:clamp(28px,3.4vw,46px) 0} .su-donorbox iframe{display:block;border:0;width:100%;max-width:500px;min-height:420px} /* ══ Editorial ══ his 2026-09-06: "a section on the front page somewhere called Editorial, it'll be editor letters." Set like the index rows below it rather than as another picture block — a letter is a voice, not a photograph. */ .su-editorial{border-top:1px solid var(--su-rule);margin-top:clamp(48px,5vw,76px); padding-top:clamp(26px,2.6vw,38px)} .su-edhead{font:500 11px/1 'DM Sans',sans-serif;letter-spacing:.16em; text-transform:uppercase;color:var(--su-mute);margin:0 0 8px} .su-edlist{display:grid;gap:0} .su-edrow{display:block;border-bottom:1px solid var(--su-rule);padding:16px 0} .su-edrow:hover .su-t{color:var(--su-deep)} .su-edrow .su-t{font-size:clamp(21px,2vw,27px);line-height:1.2} /* ══ The covers ══ the print run as a plate grid. Covers are NOT links yet — his 2026-09-06: "just leave them for now" — so no hover-lift, nothing that promises a click the page cannot honour. */ .su-covers{margin:0 0 clamp(44px,5vw,72px)} .su-covhead{font:500 11px/1 'DM Sans',sans-serif;letter-spacing:.16em; text-transform:uppercase;color:var(--su-mute);margin:0 0 18px} .su-covgrid{display:grid;gap:clamp(16px,2vw,30px); grid-template-columns:repeat(auto-fill,minmax(172px,1fr))} /* ⚠ Covers are NEVER cropped. His 2026-09-07: "make sure the odd cover cropping isn't reproduced". Each cell is a fixed portrait box and the cover sits inside it with object-fit:contain, so a landscape cover (The Food Issue) or a square one letterboxes rather than losing its edges. object-fit:cover would align the grid by cutting artwork off, which is the wrong trade for a cover. */ .su-covcell{display:block;background:none} .su-covcell img{width:100%;height:100%;display:block;object-fit:contain; object-position:center bottom} .su-covgrid>*{aspect-ratio:3/4} a.su-covcell:hover img{opacity:.88} /* A cover that opens looks like it opens. */ .su-covgo{display:inline-block;margin-top:6px;font:500 11px/1 'DM Sans',sans-serif; letter-spacing:.13em;text-transform:uppercase;color:var(--su-red)} .su-covcell.is-open{position:relative} .su-covcell.is-open img{transition:transform .18s ease,box-shadow .18s ease} .su-covcell.is-open:hover img{transform:translateY(-3px);box-shadow:0 6px 22px rgba(0,0,0,.14)} .su-covcell.is-open:hover .su-covgo{color:var(--su-deep)} /* ══ Writing about homelessness ══ his second section. The heading is HIS to write; until he does, .su-empty makes the gap look like an unwritten slot rather than a design choice. */ .su-about{border-top:1px solid var(--su-rule);margin-top:clamp(48px,5vw,76px); padding-top:clamp(26px,2.6vw,38px)} .su-abhead{font:500 11px/1 'DM Sans',sans-serif;letter-spacing:.16em; text-transform:uppercase;color:var(--su-mute);margin:0 0 8px} .su-abhead.su-empty{color:#b9b4ad;border:1px dashed #d8d3cc;display:inline-block; padding:7px 11px;letter-spacing:.09em} .su-abgrid{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .su-abrow{display:block;border-bottom:1px solid var(--su-rule);padding:16px 0;margin-right:26px} .su-abrow:hover .su-t{color:var(--su-deep)} .su-abrow .su-t{font-size:clamp(20px,1.8vw,25px);line-height:1.2} /* ══ The archive ══ his 2026-09-07: "make the archive look more like this", pointing at the front page grid. Same cards, same duotone, four across. */ .su-ixgrid{display:grid;gap:clamp(26px,3vw,46px) clamp(20px,2.4vw,34px); grid-template-columns:repeat(auto-fill,minmax(230px,1fr))} .su-ixcell{display:block} .su-ixgrid .su-fig{width:100%;aspect-ratio:3/2;margin-bottom:13px} .su-ixcell .su-t{font-size:clamp(19px,1.7vw,23px);line-height:1.22} .su-ixcell:hover .su-t{color:var(--su-deep)} @media(max-width:640px){.su-ixgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}} /* Covers sit flush — the grey was the cell showing under a picture that had not been told to fill it. */ .su-covcell{line-height:0;background:none} /* ══ Editor letters ══ a blog feed, each letter printed in full. His 2026-09-07: "it should show the full text I think". Set at reading width in the same serif the article pages use, so a letter reads like a piece rather than like a listing. */ .su-letters{max-width:680px} .su-letter{padding:0 0 clamp(40px,4.6vw,64px);margin-bottom:clamp(40px,4.6vw,64px); border-bottom:1px solid var(--su-rule)} .su-letter:last-child{border-bottom:0;margin-bottom:0} .su-lt{font:400 clamp(28px,3vw,40px)/1.14 'Instrument Serif',Georgia,serif; color:var(--su-ink);margin:0 0 8px;letter-spacing:-.008em} .su-lt a:hover{color:var(--su-deep)} .su-lmeta a{color:inherit} .su-lmeta a:hover{color:var(--su-deep)} .su-letter .su-lmeta{margin:0 0 10px} .su-letter .su-lt{margin-top:0} .su-lmeta{font:500 11px/1 'DM Sans',sans-serif;letter-spacing:.16em; text-transform:uppercase;color:var(--su-mute);margin:0 0 26px} .su-lbody p{font:400 19px/1.66 'Source Serif 4',Georgia,serif;color:#26303f;margin:0 0 1.15em} .su-lbody p:last-child{margin-bottom:0} /* ══ Print issues ══ a left rail of sections beside the plates. His 2026-09-07: "i also like the print issues page to have a left side rail for - The OGs - Zines - Monthlies - DAG - Solo Authors - Experiments - Special Issues - etc". The rail sticks; the covers scroll past it. */ .su-covwrap{display:grid;grid-template-columns:190px 1fr;gap:clamp(28px,4vw,64px); align-items:start} .su-covrail{position:sticky;top:26px} .su-covrail ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--su-rule)} .su-covrail a{display:flex;justify-content:space-between;align-items:baseline;gap:10px; padding:11px 0;border-bottom:1px solid var(--su-rule); font-family:'Instrument Serif',Georgia,serif;font-size:19px;color:var(--su-ink)} .su-covrail a span{font:500 11px/1 'DM Sans',sans-serif;letter-spacing:.08em;color:var(--su-mute)} .su-covrail a:hover{color:var(--su-deep)} .su-covers{scroll-margin-top:26px} .su-covcap{display:block;margin-top:9px;font:400 13.5px/1.4 'DM Sans',sans-serif;color:var(--su-mute)} @media(max-width:820px){.su-covwrap{grid-template-columns:1fr}.su-covrail{position:static;margin-bottom:30px}} /* ══ In the news ══ his 2026-09-07: "make this pop a bit more - perhaps with icons or logos from the websites in question". Each row carries the outlet's own favicon, fetched once and served from the theme rather than hotlinked — hotlinking would leak every reader to those domains and break when they do. ⚠ Three outlets have no retrievable logo (INSP's favicon is WordPress's, Crossroads' is Squarespace's, CLT Blog is defunct). Those carry a typographic monogram instead: a placeholder that looks like one, not a counterfeit mark. */ .su-press{margin:0;padding:0;border-bottom:1px solid var(--su-rule)} .su-press a{display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);padding:16px 0} .su-presico{width:44px;height:44px;flex:0 0 44px;object-fit:contain; border-radius:3px;background:none} .su-prestx{display:block} .su-preshd{display:block;font-family:'Instrument Serif',Georgia,serif; font-size:clamp(19px,1.8vw,24px);line-height:1.26;color:var(--su-ink)} .su-press a:hover .su-preshd{color:var(--su-deep)} .su-presrc{display:block;margin-top:5px;font:400 13.5px/1.4 'DM Sans',sans-serif; color:var(--su-mute)} /* ══ A letter, not an article ══ His 2026-09-07: "style the editor letters differently - no cover photos - and a unique letter format". So: no photograph, no centred display title, no read-next. The title sits small and left, under a dateline, at a narrower measure than an article — it should read as a note, not a feature. */ /* ── A single editor letter ────────────────────────────────────────────────── His 2026-09-08: "make single posts look more like the regular posts - but we'll have a recurring editor letter cover graphic", then E3 of five — the portrait sits beside the title as a masthead rather than pretending to be a scene. The same face on every letter is what makes them read as a series. */ .su-is-letter .su-cover{display:none} .su-is-letter .su-head{max-width:760px;margin-left:auto;margin-right:auto; display:grid;grid-template-columns:72px 1fr;gap:20px;align-items:center; text-align:left;padding-bottom:30px;margin-bottom:0; border-bottom:1px solid var(--su-rule)} .su-is-letter .su-head .su-sechead{grid-column:2;margin:0 0 6px} .su-is-letter .su-art h1{grid-column:2;font-size:clamp(27px,3.2vw,40px);line-height:1.14;margin:0} .su-is-letter .su-avatar{grid-column:1;grid-row:1 / span 4;width:72px;height:72px; border-radius:50%;overflow:hidden;background:#efefef;margin:0;display:block} /* ⚠ in colour. The site greyscales every other photograph; this one is a person introducing himself, and a grey face reads as archive rather than as now. */ .su-is-letter .su-avatar img{width:100%;height:100%;object-fit:cover;display:block; filter:none!important} .su-is-letter .su-meta{grid-column:2;margin:10px 0 0;letter-spacing:.14em} .su-is-letter .su-stand{grid-column:2} .su-is-letter .su-text{max-width:660px;margin-left:auto;margin-right:auto;padding-top:34px} .su-is-letter .su-text p{font-size:19px;line-height:1.68} .su-is-letter .su-foot{display:none} .su-is-letter.su-untitled .su-art h1{display:none} .su-is-letter.su-untitled .su-text p:first-of-type{font-size:23px;line-height:1.48; color:var(--su-ink)} @media(max-width:700px){ .su-is-letter .su-head{grid-template-columns:1fr;text-align:center;gap:16px} .su-is-letter .su-head .su-sechead,.su-is-letter .su-art h1, .su-is-letter .su-meta,.su-is-letter .su-stand{grid-column:1} .su-is-letter .su-avatar{grid-row:auto;width:64px;height:64px;margin:0 auto} } .su-letter.su-untitled .su-lbody p:first-of-type{font-size:20.5px;line-height:1.54; color:var(--su-ink)} /* The feed at /editor-letter/ uses the same voice as the single letter. */ .su-letter{border-left:2px solid var(--su-rule);padding-left:clamp(16px,2vw,32px)} .su-letter:first-child{border-left-color:var(--su-red)} /* ══ DAG's books ══ his 2026-09-07: "a single page at a time, no vert scrolling, but with clicks or arrows to move to the next page - more of a lightbox gallery approach." ⚠ The one-up layout is gated behind .is-live, which reader.js adds. Without JavaScript every page simply stacks and the book is still readable — the pages are in the markup either way. */ .su-dagbook,.su-reader .su-panel{margin:0} .su-reader{position:relative;max-width:1100px;margin:0 auto} .su-reader .su-panelimg{width:100%;height:auto;display:block;background:#f4f2ef} .su-reader:not(.is-live) .su-panel{margin-bottom:clamp(18px,2.2vw,34px)} .su-reader.is-live .su-pages{position:relative;height:min(72vh,820px);cursor:pointer; display:flex;align-items:center;justify-content:center} .su-reader.is-live .su-panel{position:absolute;inset:0;display:flex; align-items:center;justify-content:center;opacity:0;pointer-events:none; transition:opacity .16s ease} .su-reader.is-live .su-panel.on{opacity:1;pointer-events:auto} .su-reader.is-live .su-panelimg{width:auto;height:100%;max-width:100%; object-fit:contain;background:none;box-shadow:0 1px 20px rgba(0,0,0,.10)} /* ⚠ NOT .su-nav — that is the site header's class, and reusing it here gave every header on the site width:46px and position:absolute, collapsing the whole navigation into a vertical stack on every page. */ .su-rdnav{position:absolute;top:50%;transform:translateY(-50%);z-index:4; width:46px;height:46px;border:1px solid var(--su-rule);background:var(--su-paper); border-radius:50%;font:400 26px/1 'DM Sans',sans-serif;color:var(--su-ink); cursor:pointer;display:none;align-items:center;justify-content:center;padding:0 0 3px} .su-reader.is-live .su-rdnav{display:flex} .su-prev{left:-14px} .su-next{right:-14px} .su-rdnav:hover{border-color:var(--su-red);color:var(--su-deep)} .su-rdnav:disabled{opacity:.28;cursor:default;border-color:var(--su-rule);color:var(--su-ink)} .su-count{display:none;text-align:center;margin:18px 0 0; font:500 11px/1 'DM Sans',sans-serif;letter-spacing:.16em;color:var(--su-mute)} .su-reader.is-live .su-count{display:block} /* ⚠ At phone widths the image fills the container, so arrows at left:2px sat ON the artwork. They move below it. */ @media(max-width:820px){ .su-rdnav{top:auto;bottom:-54px;transform:none} .su-prev{left:calc(50% - 58px)} .su-next{right:calc(50% - 58px)} .su-reader.is-live{padding-bottom:62px} .su-reader.is-live .su-pages{height:min(62vh,560px)}} .su-dagshelf{display:grid;gap:clamp(20px,2.6vw,38px); grid-template-columns:repeat(auto-fill,minmax(184px,1fr))} .su-dagcell{display:block} /* Same rule as the covers: contain, never crop. */ /* ⚠ height:auto FIRST: WP emits height="953" and aspect-ratio only governs when a dimension is auto. Third time this trap has bitten this theme. */ .su-dagcov{width:100%;height:auto;aspect-ratio:3/4;display:block;object-fit:contain; object-position:center bottom;background:none} .su-dagt{display:block;margin-top:10px;font-family:'Instrument Serif',Georgia,serif; font-size:19px;line-height:1.25;color:var(--su-ink)} .su-dagn{display:block;margin-top:3px;font:400 13px/1.4 'DM Sans',sans-serif;color:var(--su-mute)} a.su-dagcell:hover .su-dagt{color:var(--su-deep)} /* ══ A DAG book page centres ══ his 2026-09-07: "get it all centered on the page". The 46rem reading measure is for prose; a reader wants the middle of the page, so the measure comes off entirely here and everything centres. */ .su-is-dag .su-page .wp-block-post-content{max-width:none} .su-is-dag .su-page{text-align:center} .su-is-dag .su-pt{text-align:center;max-width:16ch;margin-left:auto;margin-right:auto} .su-is-dag .su-reader{margin-left:auto;margin-right:auto;text-align:initial} .su-dagby{font:500 11px/1 'DM Sans',sans-serif;letter-spacing:.16em; text-transform:uppercase;color:var(--su-mute);text-align:center; margin:14px 0 clamp(26px,3vw,42px)} /* ══ Author photograph ══ his 2026-09-07: "find author photos, include as a small avatar on posts", and earlier "no author photo shouldn't be an obvious omission". So it is small, it sits above the byline, and when a post has no photograph nothing renders at all — no placeholder ring, no grey circle, no hole where a face should be. A piece without one looks finished. */ .su-avatar{display:block;width:52px;height:52px;margin:0 auto 12px} .su-avatar img{width:52px;height:52px;border-radius:50%;object-fit:cover; display:block;filter:grayscale(1) contrast(1.03)} /* ══ Donate ══ the check address and tax status, carried over from speakupmag.org/donate/. His words, not mine — the page already said this. */ .su-address{font:400 18px/1.7 'Instrument Serif',Georgia,serif;color:var(--su-ink); margin:0 0 22px} .su-taxline{font-size:14.5px;color:var(--su-mute);max-width:44ch;margin:0} /* ══ The masthead in the nav ══ His 2026-09-05, in three steps: "put Speak Up Magazine in the nav bar next to logo", then "it should actually go up in the nav bar", then "I'm wondering if it should replace logo actually (after the front page)". So: the FRONT PAGE keeps the large wordmark and shows the mark in the nav. Every other page shows the name set in type IN the nav bar, and the mark comes out — one identity in the corner, not two. Reverting is the two lines below. */ .su-brand{display:flex;align-items:center;gap:14px} .su-navtitle{font-family:'Instrument Serif',Georgia,serif;font-size:29px; line-height:1;color:var(--su-ink);letter-spacing:-.008em} .su-navtitle a{color:inherit} .home .su-navtitle{display:none} body:not(.home) .su-masthead{display:none} body:not(.home) .su-brand .wp-block-site-logo{display:none} /* ══ "awful much" — images were rendering at their natural ratio ══ WordPress emits width and height attributes on a featured image and core's own rule sets height:auto, which beat the aspect-ratio and let a portrait photograph run the height of the screen. Every slot now states its ratio and crops to it, which is what the mockup did and the theme did not. */ .su-lead .su-fig{width:100%;aspect-ratio:4/3} .su-feats .su-fig{width:100%;aspect-ratio:3/2} .su-boxes .su-fig{width:100%;aspect-ratio:4/3} .su-cover img{aspect-ratio:21/8} .su-sq img{aspect-ratio:1;height:100%} .su-lead .su-t{font-size:clamp(28px,3.2vw,44px);line-height:1.06} .su-lead .su-dek{margin:16px 0 0;max-width:40ch;color:var(--su-body); font-family:'DM Sans',sans-serif;font-size:18.4px;line-height:1.6} /* ══ Pages — the community site's shape, in this register ══ */ /* ⚠ Top padding, not zero: with padding-top:0 the title's top margin collapses straight out of the container and the page title lands against the nav. */ .su-page{padding:clamp(60px,6.5vw,104px) var(--su-gx) 70px} /* The nav now carries the name, so the page title needs real air under it or the two read as one stacked lockup. */ .su-pt{font-family:'Instrument Serif',Georgia,serif;font-weight:400;color:var(--su-ink); font-size:clamp(36px,4.6vw,62px);line-height:1.06;letter-spacing:-.012em; margin:0 0 clamp(30px,3.4vw,46px);max-width:22ch} /* Content sits at the left margin at a reading measure — not centred in the full width, which left it floating with white on both sides. */ .su-page .wp-block-post-content{max-width:46rem;margin-left:auto;margin-right:auto} /* The page's reading measure is 46rem, which is right for prose and far too narrow for a wall of covers — the grid was collapsing to two columns. The covers block alone breaks out of it, using a negative right margin so the sticky rail inside keeps working (a transform would break sticky). Only above 900px; below that the measure is already the full width. */ /* A page whose job is a wide grid does not want the 46rem reading measure at all. Negative margins were pulling those grids back out of a narrow column, and once the column itself was centred the sums left the Print Issues rail floating in from the left — his 2026-09-08: "move this one back over! now it looks odd". So these pages simply drop the measure and use the page width, which the 1240px container already centres. No arithmetic to get wrong. */ .su-page:has(.su-covwrap) .wp-block-post-content, .su-page:has(.su-dagshelf) .wp-block-post-content, .su-page:has(.su-dagbook) .wp-block-post-content, .su-page:has(.su-ixgrid) .wp-block-post-content, .su-page:has(.su-writers) .wp-block-post-content{max-width:none;margin-left:0;margin-right:0} .su-page .su-covwrap,.su-page .su-dagshelf,.su-page .su-dagbook, .su-page .su-ixgrid,.su-page .su-writers{max-width:none} .su-page .wp-block-post-content>*{max-width:100%} .su-lede{font-family:'Instrument Serif',Georgia,serif; font-size:clamp(21px,2.1vw,28px);line-height:1.38;color:var(--su-ink); max-width:36ch;margin:0 0 34px} .su-figure{margin:0 0 34px} .su-figure img{width:100%;filter:grayscale(1) contrast(1.03)} .su-figure figcaption{font-size:14px;color:var(--su-mute);margin-top:11px} .su-section{padding:clamp(30px,3.4vw,48px) 0 0;margin-top:clamp(26px,3vw,40px); border-top:1px solid var(--su-rule)} .su-section-head{font-family:'Instrument Serif',Georgia,serif;font-weight:400; color:var(--su-ink);font-size:clamp(24px,2.4vw,33px);line-height:1.16; margin:0 0 16px;letter-spacing:-.008em} .su-page .wp-block-button__link{background:transparent;color:var(--su-ink); border:1px solid var(--su-rule);border-radius:0;padding:14px 24px; font-family:'DM Sans',sans-serif;font-size:15px} .su-page .wp-block-button__link:hover{border-color:var(--su-red);color:var(--su-deep)} /* ══ The mark, once it leaves the nav ══ His 2026-09-05: "the logo could remain on the page, just down in the footer". So on an inner page the name is the identity at the top and the mark is the sign-off at the bottom — it appears once either way, never twice. */ /* ⚠ Not inside a .su-w wrapper, so padding alone put the colophon on a different left edge from the nav above 1240px -- 100px out at 1440. */ .su-foot-site{border-top:1px solid var(--su-rule);margin-top:70px; max-width:1240px;margin-left:auto;margin-right:auto;box-sizing:border-box; padding:30px var(--su-gx) 64px;display:flex;justify-content:space-between; align-items:center;gap:26px;font-size:14px;color:var(--su-mute);flex-wrap:wrap} .su-footbrand{display:flex;align-items:center;gap:14px} .su-footbrand .wp-block-site-logo img{height:26px;width:auto} .su-colophon{margin:0} .su-foot-site p{margin:0} /* ── Donorbox: the address under the embed, for when the iframe never loads ── */ .su-dbfall{margin:14px 0 0;font-size:13.5px;color:var(--su-mute);max-width:500px} .su-dbfall a{color:var(--su-red);border-bottom:1px solid var(--su-rule)} .su-dbfall a:hover{border-color:var(--su-red)} /* ── Mobile navigation overlay ────────────────────────────────────────────── The open overlay is fixed to the viewport, so it inherits none of the page gutter and the links land hard against the edge. Core ships its own padding rule at the same specificity and loads after the theme, so these have to out-specify it — hence the .su-links qualifier, which is the nav's class. */ .su-nav .su-links .wp-block-navigation__responsive-container.is-menu-open{ padding:clamp(24px,6vw,52px) var(--su-gx) clamp(40px,8vw,72px)} .su-nav .su-links .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{padding-top:52px;gap:6px} .su-nav .su-links .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a{ font:400 clamp(25px,6.4vw,34px)/1.34 'Instrument Serif',Georgia,serif;color:var(--su-ink)} .su-nav .su-links .wp-block-navigation__responsive-container.is-menu-open .is-style-su-outline a{font-family:'DM Sans',sans-serif;font-size:15px;line-height:1; padding:9px 17px} /* ── The submissions form ──────────────────────────────────────────────────── Tally's iframe reports its own height through embed.js. The min-height keeps the space from collapsing to nothing while it loads, or forever if the embed is blocked — in which case the link underneath is the whole page. */ .su-tally{max-width:100%;margin:0 0 4px} .su-tally iframe{display:block;width:100%;min-height:1400px;border:0;background:transparent} .su-tallyfall{margin:18px 0 0;font-size:13.5px;color:var(--su-mute)} .su-tallyfall a{color:var(--su-red);border-bottom:1px solid var(--su-rule)} .su-tallyfall a:hover{border-color:var(--su-red)} /* ── Featured writers ──────────────────────────────────────────────────────── His 2026-09-08: "lets do featured writers w1 for now", and "same format with the featured writers - floating sidebar left justified" — the Print Issues shape. A standing index on the left, a row per writer beside it: portrait, name, count, then everything they made as a two-column list of titles. The portrait is a slot; with none stored the row starts at the name and leaves no gap. */ .su-writers{display:grid;grid-template-columns:190px 1fr;gap:clamp(26px,4vw,56px); align-items:start} .su-wrail{position:sticky;top:24px} .su-wrail ul{list-style:none;margin:0;padding:0} .su-wrail li a{display:flex;justify-content:space-between;gap:8px;padding:9px 0; font-size:14.5px;color:var(--su-mute);border-bottom:1px solid var(--su-rule)} .su-wrail li a:hover{color:var(--su-ink)} .su-wrail li a span{font-variant-numeric:tabular-nums} .su-wr{display:grid;grid-template-columns:150px 1fr;gap:clamp(20px,3vw,44px); align-items:start;padding:26px 0;border-bottom:1px solid var(--su-rule);scroll-margin-top:20px} .su-wr:first-child{padding-top:0} .su-wr:last-child{border-bottom:0} .su-wrpic{display:block;width:120px;height:120px;border-radius:50%;overflow:hidden; background:#efefef;margin-bottom:12px} .su-wrpic img{width:100%;height:100%;object-fit:cover;display:block} .su-wrname{font:400 22px/1.12 'Instrument Serif',Georgia,serif;color:var(--su-ink);margin:0} .su-wrn{margin:5px 0 0;font:500 10.5px/1 'DM Sans',sans-serif;letter-spacing:.14em; text-transform:uppercase;color:var(--su-mute)} .su-wrts{columns:2;column-gap:32px} .su-wrti{display:flex;gap:11px;align-items:center;padding:5px 0;break-inside:avoid} .su-wrth{width:44px;height:32px;flex:0 0 44px;display:block;object-fit:cover;background:#efefef} .su-wrti>span{font:400 15.5px/1.32 'Source Serif 4',Georgia,serif;color:#26303f} .su-wrti em{font-style:normal;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--su-red);margin-left:5px;white-space:nowrap} .su-wrti:hover>span{color:var(--su-deep)} @media(max-width:900px){ .su-writers{grid-template-columns:1fr} .su-wrail{position:static;margin-bottom:26px} .su-wr{grid-template-columns:1fr} .su-wrts{columns:1} .su-wrpic{width:84px;height:84px} } /* ── Equal cards ───────────────────────────────────────────────────────────── His 2026-09-08: "Let's have all of the pieces on here the same height. I'm specifically talking about just the posts versus the actual magazines." The picture is already a fixed ratio; what varied was the title, one line here and two there. The title block is now a fixed two lines and the byline sits at the foot of the cell, so every row lines up. Magazine covers are NOT touched — their shapes are the point. */ .su-ixgrid{align-items:stretch} .su-ixcell{display:flex;flex-direction:column;height:100%} .su-ixcell .su-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;min-height:2.5em} /* His 2026-09-08: "fix the spacing issue with author names." The byline used to be pushed to the foot of the cell (margin-top:auto), so any slack in a row opened up as a gulf between a title and its writer. The two-line title block above already keeps the bylines aligned; the slack now falls below the name, where it reads as margin instead of as a mistake. */ .su-ixcell .su-by{margin-top:6px} .su-feats .su-t,.su-boxes .su-t{display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;overflow:hidden;min-height:2.5em} .su-wrgrid{align-items:stretch} .su-wrcell{display:flex;flex-direction:column;height:100%} .su-wrcell .su-wrt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;min-height:2.4em} /* ── Editor letters, L1 ────────────────────────────────────────────────────── His 2026-09-08 pick of five. A card per letter with an opening extract; the full text is on the letter's own page. The date sits where a date belongs and says only as much as is known — see su_letter_date(). */ .su-lcards{max-width:740px;margin:0 auto;display:flex;flex-direction:column;gap:26px} .su-page .wp-block-post-content .su-lcards{margin-left:auto;margin-right:auto; width:min(740px,100%)} .su-page:has(.su-lcards) .wp-block-post-content{max-width:none} /* text-align alone was not enough: .su-pt carries max-width:22ch and no auto margins, so the text centred inside a narrow box still pinned to the left edge while the content column below it was centred. The box has to be centred too. */ .su-page:has(.su-lcards) .su-pt{text-align:center;margin-left:auto;margin-right:auto} .su-lcard{display:block;border:1px solid var(--su-rule);background:#fff; padding:30px clamp(22px,3vw,38px);transition:border-color .14s ease} .su-ltop{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px} .su-lnum{font:500 11px/1 'DM Sans',sans-serif;letter-spacing:.15em;color:var(--su-mute)} .su-llab{font:500 11px/1 'DM Sans',sans-serif;letter-spacing:.13em;text-transform:uppercase; color:var(--su-red);border-bottom:1px solid var(--su-red);padding-bottom:2px} .su-lh{display:block;font:700 clamp(20px,2vw,25px)/1.24 'DM Sans',sans-serif; color:var(--su-ink);margin-bottom:14px} .su-lx{display:block;font:400 16px/1.62 'Source Serif 4',Georgia,serif;color:#4b5563} .su-lcard:hover{border-color:#c9c5be} .su-lcard:hover .su-lh{color:var(--su-deep)} @media(max-width:560px){.su-lcard{padding:24px 20px}} .su-footlink a{color:var(--su-mute);border-bottom:1px solid var(--su-rule);padding-bottom:2px} .su-footlink a:hover{color:var(--su-deep);border-color:var(--su-deep)} /* ── Archive filter ────────────────────────────────────────────────────────── His 2026-09-08: "add some sort of filtering option or something." Ships hidden and is revealed by script, so no-JS readers get the archive rather than a control that does nothing. */ .su-ixbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 28px} .su-ixq,.su-ixw{font:400 14px/1.4 'DM Sans',sans-serif;color:var(--su-ink); background:#fff;border:1px solid #dcdcdc;border-radius:2px;padding:9px 12px} .su-ixq{flex:1 1 240px;max-width:320px;min-width:0} .su-ixq:focus,.su-ixw:focus{outline:2px solid var(--su-red);outline-offset:1px; border-color:transparent} .su-ixn{font:400 13px/1.4 'DM Sans',sans-serif;color:var(--su-mute);margin-left:2px} /* .su-ixcell sets display:flex, and a class selector outranks the browser's own [hidden]{display:none} — so filtered-out cards kept their space and the filter looked broken while the count beside it was already correct. */ .su-ixgrid .su-ixcell[hidden]{display:none!important} @media(max-width:640px){.su-ixq{max-width:none}.su-ixw{flex:1 1 100%}} /* ── Editor Letters masthead, E1 ───────────────────────────────────────────── His 2026-09-08 pick of five: portrait and name above the letters. The masthead, the page's own lede paragraph and the cards are three siblings, ordered here, so the line he may write in Gutenberg lands under his name without the block having to own his words. */ .su-page:has(.su-lmast) .wp-block-post-content{display:flex;flex-direction:column} .su-page:has(.su-lmast) .su-lmast{order:1} .su-page:has(.su-lmast) .su-lede{order:2;text-align:center;max-width:440px; margin-left:auto;margin-right:auto} .su-page:has(.su-lmast) .su-lcards{order:3} .su-lmast{text-align:center;margin:0 auto 30px;display:block} .su-lmpic{display:block;width:92px;height:92px;margin:0 auto 15px} /* In colour. Every other photograph on the site is greyscaled; a grey face at the head of his own letters reads as archive rather than as the person writing. */ .su-lmpic img{width:92px;height:92px;border-radius:50%;object-fit:cover;display:block; filter:none!important} .su-lmname{display:block;font:400 30px/1.1 'Instrument Serif',Georgia,serif; color:var(--su-ink)} @media(max-width:640px){ .su-lmpic,.su-lmpic img{width:78px;height:78px} .su-lmname{font-size:26px} } /* ── A reader at the foot of an article ────────────────────────────────────── His 2026-09-08: "add the vince mag to the bottom here, in the same read it immersively style". The same su/dag-book block the zines use, dropped after the last paragraph of the piece it belongs to. It needs air above it so it reads as a companion to the writing rather than a continuation of it. */ .su-art .su-reader{margin-top:clamp(34px,4vw,60px)} /* ── Archive by writer, A5 ─────────────────────────────────────────────────── His 2026-09-09 pick of five. A section per writer, most-published first. The heading carries the name so the cards below it don't repeat it. */ .su-wsecs{display:block} .su-wsec{margin:0 0 clamp(30px,3.4vw,48px)} .su-wsec[hidden]{display:none!important} .su-wsh{display:flex;justify-content:space-between;align-items:baseline;gap:16px; font-family:'Instrument Serif',Georgia,serif;font-weight:400; font-size:clamp(21px,2.1vw,27px);line-height:1.2;color:var(--su-ink); margin:0 0 16px;padding-bottom:9px;border-bottom:1px solid #e0e0dd} .su-wsh em{flex:0 0 auto;font:400 11px/1.8 'DM Sans',sans-serif;font-style:normal; letter-spacing:.12em;text-transform:uppercase;color:var(--su-red)} /* Cards inside a section: no byline to make room, so the title sits closer to its picture and a one-piece section still looks composed. */ .su-wsec .su-ixgrid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))} .su-wsec .su-ixcell .su-t{min-height:0;margin-top:9px} @media(max-width:640px){ .su-wsec .su-ixgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))} } /* ── Mobile: the reader was fitting pages by height ────────────────────────── Measured on a 375px phone: a page image landed at 282x503 CSS px from a 768x1373 source, which put the body type at roughly 6.7px — about 40% of a readable size, recoverable only by pinch-zooming a two-column justified page twenty-four times. The cause was height-first fitting: a 72vh stage with height:100% left 53px of the phone's width unused. Fit by WIDTH on phones and let the page scroll; the reader's own writing is the point. */ @media(max-width:820px){ .su-reader.is-live .su-pages{height:auto;min-height:0} .su-reader.is-live .su-panel{position:relative;inset:auto} .su-reader.is-live .su-panelimg{width:100%;height:auto;max-width:100%} } /* ── Tap targets ───────────────────────────────────────────────────────────── The nav open/close buttons measured 24x24 — the bare WCAG floor, well under the 44px platform guidance. This audience reads on cheap phones with less accurate digitisers and often cracked glass, and the button is the only route to every other page. Padding grows the target without growing the icon. */ .su-navbtn,.su-navclose,button.wp-block-navigation__responsive-container-open, button.wp-block-navigation__responsive-container-close{ min-width:44px;min-height:44px;display:inline-flex;align-items:center; justify-content:center} .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content{ min-height:44px;display:flex;align-items:center} /* An unwritten slot should occupy no space until it has words in it. */ .su-section-head:empty,.su-lede:empty,.su-mission:empty,.su-sec:empty{display:none}