/* ══════════════════════════════════════════════════════════════════════════════════════════════ SYCOPHANT — THE ISSUE. The art direction the baseline sheet asked for and never got. ------------------------------------------------------------------------------------------------ pn-sycophant-20260815.css says, in its own words, of everything below its line 157: "Written by the narrative desk so the corpus is LEGIBLE on arrival, not designed. Rita owns the real back-page art direction. Replace it; do not build on it." This is that replacement. It loads AFTER the baseline sheet and after sycophant-press.css, and it takes the paper from one 720px column of undifferentiated type to an issue with spreads, a grid, a scale, pictures and a page turn. ⛔ THE DIRECTION IS LOCKED AND UNCHANGED (design/STYLE_SOURCE_OF_TRUTH.md, SPEC_sycophant_build §1, the recorded seam against Theme Law §5). Ink #14110C on aged paper #ECE6D8. No theming, no --accent, no dark variant, and the pictures are black and white for ever. Nothing here restyles the paper; it lays it out. Every colour below is one of the four already in the treatment. THE THREE TYPE ROLES, kept sharply apart — this is what stops the paper reading as one sans at fourteen sizes: · Bodoni Masthead 900 the nameplate, the heds, the ad slabs — display · Georgia everything anybody actually reads — text · JetBrains Mono kickers, folios, captions, credits — production type ══════════════════════════════════════════════════════════════════════════════════════════════ */ :root{ --syc-gut: clamp(16px, 4vw, 34px); --syc-bar: 52px; } /* ── THE SHELL ──────────────────────────────────────────────────────────────────────────────── The baseline sheet made #pn-syco itself the scroller. The issue needs a fixed bar above a scroller it controls, so the scroll container moves down to .syco-page. */ #pn-syco{ overflow:hidden; display:flex; flex-direction:column; /* the paper's tooth belongs to the SHEET, not to the pictures printed on it — grain that stops at a picture's edge is the exact tell of a pasted-in image (PRESS_TREATMENT.md §5). */ background-color:#ECE6D8; } /* ── THE BAR — the only chrome. Deference: it is 52px of quiet production type and gets out of the way of the paper entirely. Not glass, not a card: a printed masthead rule. ─────────────────── */ #pn-syco .syco-bar{ flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:6px var(--syc-gut); min-height:var(--syc-bar); border-bottom:1px solid rgba(20,17,12,.28); background:#ECE6D8; } #pn-syco .syco-bar-t{ margin:0; flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 9.5px/1 ui-monospace,"JetBrains Mono",Menlo,monospace; letter-spacing:.2em; text-transform:uppercase; color:rgba(20,17,12,.62); } #pn-syco .syco-pageno{ margin:0; flex:0 0 auto; font:700 10px/1 ui-monospace,"JetBrains Mono",Menlo,monospace; letter-spacing:.16em; color:rgba(20,17,12,.72); font-variant-numeric:tabular-nums; } /* the back button was sticky+floated against a scrolling page; in the bar it is simply a button */ #pn-syco .syco-back{ position:static; float:none; margin:0; } /* ── THE SCROLLER ───────────────────────────────────────────────────────────────────────────── Desktop default: one vertical issue. The phone carousel is the override further down, because the wide layout is the one that has to survive if a query never matches. */ #pn-syco .syco-page{ flex:1 1 auto; min-height:0; max-width:none; margin:0; padding:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce){ #pn-syco .syco-page{ scroll-behavior:auto } } .syco-spread{ display:block; } .syco-spread:focus{ outline:none } /* a keyboard turn must be visible — the spread takes focus on a page turn, so it gets a ring */ .syco-spread:focus-visible{ outline:2px solid #14110C; outline-offset:-4px } .syco-sheet{ max-width:1180px; margin:0 auto; padding:clamp(20px,3.2vw,46px) var(--syc-gut) clamp(28px,4vw,64px); } /* the spread rule — a page break you can see, and the thing that tells a desktop reader there is more paper below. A dashed rule and a standing head, the way a section front is set. */ .syco-spread + .syco-spread .syco-sheet{ border-top:1px solid rgba(20,17,12,.3) } .syco-spreadh{ margin:0 0 clamp(14px,1.6vw,22px); font:700 10px/1 ui-monospace,"JetBrains Mono",Menlo,monospace; letter-spacing:.26em; text-transform:uppercase; color:rgba(20,17,12,.62); } /* the folio — the page number at the foot of a spread. Pure furniture, and the cheapest signal that this is a publication rather than a page. */ .syco-folio{ display:flex; justify-content:space-between; gap:12px; margin:clamp(24px,3vw,42px) 0 0; padding-top:9px; border-top:1px solid rgba(20,17,12,.28); font:600 9px/1.4 ui-monospace,"JetBrains Mono",Menlo,monospace; letter-spacing:.2em; text-transform:uppercase; color:rgba(20,17,12,.62); font-variant-numeric:tabular-nums; } /* ══ 1 · THE FRONT PAGE ═══════════════════════════════════════════════════════════════════════ */ #pn-syco .syco-mast{ padding:0 0 6px } /* The nameplate is capped, not maximised. SPEC_sycophant_build §2 puts the nameplate at ≤20% of the first view, and at 132px it was taking half of a 720px screen — the masthead became the product and the news went below the fold, which is the same failure as printing nothing. 88px is the largest size that still leaves the lead cut and the hed above the fold at 1280×720, measured in the gate rather than judged by eye. */ #pn-syco .syco-mark--hero{ font-size:clamp(46px,7.4vw,88px) } /* THE Y-BOW CLEARANCE. The bow is an absolutely-positioned strip hanging .34em BELOW the mark's baseline, so it is outside the box and cannot push anything. The baseline sheet cleared it with a fixed margin on the dateline, which held at one nameplate size and struck straight through the dateline the moment the mark scaled up. Expressed in em on the mark itself it scales with the mark for ever, at any viewport, which is the only version that cannot regress. */ #pn-syco .syco-mark--hero{ margin-bottom:.42em } #pn-syco .syco-date{ margin-top:0 } #pn-syco .syco-rule{ margin:clamp(12px,1.4vw,18px) 0 clamp(14px,1.6vw,20px) } /* On the FRONT PAGE the founding line is a standing head, not an archive divider. It was inheriting the archive's dashed rule and 34px stand-off, which cost ~48px of the first screen to draw a page break in the one place there is no page break. */ .syco-spread[data-syco-spread="front"] .syco-edline{ margin:0 0 10px; padding-top:0; border-top:0 } /* THE SCALE. A trade-paper front page runs its lead at a size nothing else on the page comes near — that ratio IS the hierarchy, and its absence is the flatness the CEO named. The lead hed tops out at 52px against a 16px item hed: a 3.25× step, and it still sets four or five words to the line, which a 64px hed did not. */ #pn-syco .syco-hed{ font-size:clamp(29px,3.9vw,52px); line-height:1.0; margin:0 0 clamp(10px,1.2vw,16px) } #pn-syco .syco-stand{ font-size:clamp(16px,1.5vw,20px); line-height:1.45; max-width:46ch; color:rgba(20,17,12,.82); } #pn-syco .syco-lead .syco-k{ margin:0 0 8px } /* the lead cut breaks the measure — that asymmetry is the front page's whole job */ .syco-lead .syc-cut--lead{ margin:0 0 clamp(14px,1.8vw,22px) } @media (min-width:900px){ /* the front page opens into two unequal columns: the picture takes the larger, the words the smaller. Unequal on purpose — two equal columns read as a UI card pair, not a front page. */ #pn-syco .syco-lead{ display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(24px,2.6vw,40px); align-items:start; } .syco-lead .syc-cut--lead{ grid-column:1; grid-row:1 / span 4; margin:6px 0 0 } .syco-lead .syco-k, .syco-lead .syco-hed, .syco-lead .syco-stand{ grid-column:2 } /* the body drops under BOTH, set to a comfortable two-column measure like a real broadsheet */ #pn-syco .syco-lead .syco-body{ grid-column:1 / -1; max-width:none; margin-top:clamp(14px,1.6vw,20px); columns:2; column-gap:clamp(24px,2.6vw,40px); column-rule:1px solid rgba(20,17,12,.16); } #pn-syco .syco-lead .syco-by{ grid-column:1 / -1 } } @media (min-width:1280px){ #pn-syco .syco-lead .syco-body{ columns:3 } } /* ── THE CONTENTS — the reason to turn the page ─────────────────────────────────────────────── On a fresh save this is the single most valuable object on the screen: it converts "one article and a lot of blank paper" into "an issue with five sections in it". Set as an index, not as cards — leader dots and a count, the way a contents page has always been set. */ .syco-contents{ margin:clamp(24px,3vw,40px) 0 0; padding-top:clamp(14px,1.6vw,20px); border-top:2.5px solid #14110C } .syco-contents ol{ list-style:none; margin:0; padding:0 } @media (min-width:720px){ .syco-contents ol{ columns:2; column-gap:clamp(28px,3vw,48px) } } .syco-contents li{ break-inside:avoid; margin:0 0 2px } .syco-contents a{ display:flex; align-items:baseline; gap:8px; /* the 44px touch floor comes from PADDING, not min-height. With min-height the row grew to 48px while the type stayed at the top, and the leader dots — which align to the bottom of the row — fell half a centimetre below the words they were meant to be joining. Padding makes the row tall by making the text box tall, so the dots land on the line. */ padding:13px 0; text-decoration:none; color:#14110C; border-bottom:1px solid rgba(20,17,12,.14); } .syco-contents a:hover .syco-contents-l{ text-decoration:underline; text-underline-offset:3px } .syco-contents a:focus-visible{ outline:2px solid #14110C; outline-offset:2px } .syco-contents-l{ font:700 15px/1.3 Georgia,serif; letter-spacing:-.005em; /* the leader dots. Furniture, and it is what makes an index read as an index. */ flex:0 1 auto; } .syco-contents a::after{ content:""; flex:1 1 auto; align-self:flex-end; margin-bottom:3px; min-width:24px; border-bottom:1px dotted rgba(20,17,12,.42); } .syco-contents-n{ flex:0 0 auto; order:3; font:600 9.5px/1.4 ui-monospace,"JetBrains Mono",Menlo,monospace; letter-spacing:.14em; text-transform:uppercase; color:rgba(20,17,12,.62); } /* ══ 2 · THE WEEK ═════════════════════════════════════════════════════════════════════════════ Stories at a second scale, in a real multi-column measure. The cuts break the run. */ @media (min-width:820px){ #pn-syco .syco-col{ columns:2; column-gap:clamp(26px,2.8vw,44px); column-rule:1px solid rgba(20,17,12,.16); border-top:1px solid rgba(20,17,12,.3) } #pn-syco .syco-col > *{ break-inside:avoid } } @media (min-width:1180px){ #pn-syco .syco-col{ columns:3 } } #pn-syco .syco-ihed{ font-size:clamp(16px,1.35vw,19px); line-height:1.24 } .syco-cutwrap{ margin:14px 0 6px; break-inside:avoid } .syco-cutwrap .syc-cut--column{ margin:0 } /* THE SECTION LEAD — the biggest story on the section front. Without it the week ran eight items at one size in three columns, which is the front page's flatness reappearing one page later. */ .syco-seclead{ margin:0 0 clamp(18px,2vw,26px); padding-bottom:clamp(16px,1.8vw,24px); border-bottom:2.5px solid #14110C; } #pn-syco .syco-item.is-seclead{ padding:0; border-bottom:0; cursor:default } #pn-syco .syco-item.is-seclead .syco-ihed{ font-family:"Bodoni Masthead",Didot,Georgia,serif; font-weight:900; letter-spacing:-.015em; font-size:clamp(22px,2.5vw,33px); line-height:1.06; } /* the section lead's standfirst is always open — the story is the point of the page, and hiding it behind a tap is the opposite of the Noise Test */ #pn-syco .syco-item.is-seclead .syco-ibody{ display:block; font-size:clamp(14.5px,1.2vw,16px); max-width:58ch; margin-top:10px } @media (min-width:900px){ .syco-seclead{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(20px,2.4vw,36px); align-items:start } .syco-seclead .syc-cut--column{ grid-column:1 } .syco-seclead .syco-item{ grid-column:2 } /* when the section lead has no picture the words take the whole measure rather than sitting in a half-width column with a hole beside them */ .syco-seclead:not(:has(.syc-cut)) .syco-item{ grid-column:1 / -1; max-width:70ch } } /* ══ 3 · THE COLUMN ═══════════════════════════════════════════════════════════════════════════ The one spread with no picture on it, by law — so the contrast is typographic. */ #pn-syco .syco-column{ margin:0; padding:0; border-top:0; max-width:44rem } #pn-syco .syco-colhed{ font-family:"Bodoni Masthead",Didot,Georgia,serif; font-weight:900; font-size:clamp(24px,3.4vw,44px); line-height:1.04; letter-spacing:-.02em; margin:0 0 clamp(14px,1.6vw,20px); } /* the column runs at a larger measure than the news: it is the one piece on the paper somebody sat down to write, and the type says so. */ #pn-syco .syco-colbody{ font-size:clamp(16.5px,1.5vw,20px); line-height:1.58; max-width:54ch; color:rgba(20,17,12,.88) } /* THE SIGNATURE — byline and the columnist's standing description, ruled off under the piece. Furniture, set once, the same every week. This is what a column page has instead of a picture. */ #pn-syco .syco-colsig{ margin:clamp(20px,2.4vw,30px) 0 0; padding-top:10px; max-width:44ch; border-top:1px solid rgba(20,17,12,.42); } #pn-syco .syco-colsig-n{ margin:0 0 3px; font:700 11px/1.2 ui-monospace,"JetBrains Mono",Menlo,monospace; letter-spacing:.2em; text-transform:uppercase; color:#14110C; } #pn-syco .syco-colsig-s{ margin:0; font:italic 400 14px/1.5 Georgia,serif; color:rgba(20,17,12,.72); } /* the drop cap. One per issue, on the column only — printed matter, and free hierarchy. */ #pn-syco .syco-colbody::first-letter{ font-family:"Bodoni Masthead",Didot,Georgia,serif; font-weight:900; font-size:3.1em; line-height:.82; float:left; margin:.06em .09em 0 0; color:#14110C; } /* ══ 4 · ON THE MOVE — people, with the pips ═════════════════════════════════════════════════ */ @media (min-width:820px){ #pn-syco .syco-furn--appts, #pn-syco .syco-furn--diary{ columns:2; column-gap:clamp(26px,2.8vw,44px) } #pn-syco .syco-furn--appts .syco-furnh, #pn-syco .syco-furn--diary .syco-furnh{ column-span:all } #pn-syco .syc-appointment{ break-inside:avoid } } #pn-syco .syc-appointment{ margin:0 0 12px; align-items:flex-start } #pn-syco .syc-appointment .syco-appt, #pn-syco .syc-appointment .syco-diary{ margin:0 } /* the pip grows a little from the press sheet's 40px: at 40 a face is a smudge on a phone */ /* 64px, not 52. A pip is baked at 160px, so 52 CSS px is a 3x downscale of a coarse screen and a face turns to grit; 64 (128 device px at DPR 2) is close enough to native that the dots survive. Raised with the pip tone re-bake rather than instead of it — both were needed. */ #pn-syco .syc-cut--pip{ inline-size:64px; flex:0 0 64px } /* ══ 5 · THE BACK PAGES ══════════════════════════════════════════════════════════════════════ Small ads at a small measure in many narrow columns — the density IS the design. A back page that breathes like a landing page is not a back page. */ @media (min-width:720px){ #pn-syco .syco-furn--class{ columns:3; column-gap:clamp(20px,2.2vw,32px) } } @media (min-width:1100px){ #pn-syco .syco-furn--class{ columns:4 } } @media (min-width:820px){ #pn-syco .syco-furn--lt, /* corrections ran full-width and left half the back page empty under three lines of type */ #pn-syco .syco-furn--corr{ columns:2; column-gap:clamp(26px,2.8vw,44px) } #pn-syco .syco-furn--lt .syco-furnh, #pn-syco .syco-furn--corr .syco-furnh{ column-span:all } #pn-syco .syco-lt,#pn-syco .syco-corr{ break-inside:avoid } /* the ads sit in a row of slabs rather than stacked, so the back page has a horizontal beat */ #pn-syco .syco-furn--ads{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,1.8vw,26px) } #pn-syco .syco-ad{ margin:0 } } #pn-syco .syco-ad-l{ font-size:clamp(16px,1.6vw,21px); line-height:1.1 } /* ── the archive ─────────────────────────────────────────────────────────────────────────────── BACK ISSUES MUST LOOK OLD. Set at the live-news weight they read as a repeat, and a reader who has just swiped through the week sees the same headlines at the same size and concludes the app is broken. So the archive drops a step in size, loses the rust kicker entirely, and prints in lighter ink — the way a paper you have already read looks on the pile. */ .syco-backissue{ margin:0 0 clamp(20px,2.4vw,32px) } #pn-syco .syco-backissue .syco-ihed{ font-size:clamp(14px,1.1vw,15.5px); line-height:1.28; color:rgba(20,17,12,.78) } #pn-syco .syco-backissue .syco-k{ color:rgba(20,17,12,.62); font-size:9px } #pn-syco .syco-backissue .syco-item{ padding:9px 0 } @media (min-width:820px){ .syco-backissue{ columns:2; column-gap:clamp(26px,2.8vw,44px) } .syco-backissue > *{ break-inside:avoid } .syco-backissue .syco-edline{ column-span:all } } /* ══════════════════════════════════════════════════════════════════════════════════════════════ THE PAGE TURN — phone only. ------------------------------------------------------------------------------------------------ Horizontal scroll-snap. The browser keeps the scroll position; nothing here or in the JS calls preventDefault on a wheel or a touchmove, and there is no page-level VERTICAL snap — the two things that make scroll-driven UI feel broken. The axes are separated on purpose: the carousel is x, and a spread taller than the screen scrolls y inside itself, so the gestures never fight. The peek is the affordance. A sliver of the next sheet at the right edge is how a reader knows there is a next sheet; a carousel with no peek and no indicator is a page that looks finished. ══════════════════════════════════════════════════════════════════════════════════════════════ */ @media (max-width:819px){ #pn-syco .syco-page{ display:flex; flex-flow:row nowrap; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding-inline:0; } .syco-spread{ /* THE PEEK is exactly one gutter wide, which is what makes it read as the EDGE OF THE NEXT SHEET rather than as a broken column. At 20px it was wider than the sheet's own padding, so the strip filled with sliced half-letters from the next spread's headlines — an affordance that looks like a rendering bug is worse than no affordance. One gutter shows paper, the fold rule, and nothing else. */ flex:0 0 calc(100% - var(--syc-gut)); scroll-snap-align:start; scroll-snap-stop:always; /* one page per swipe — never skid past two */ height:100%; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; border-right:1px solid rgba(20,17,12,.22); /* a sheet edge is a hair, not a UI divider */ } .syco-spread:last-child{ border-right:0; flex-basis:100% } .syco-sheet{ padding:18px var(--syc-gut) 28px; min-height:100% } .syco-spread + .syco-spread .syco-sheet{ border-top:0 } /* no horizontal scrollbar across the paper — the page indicator in the bar is the position */ #pn-syco .syco-page{ scrollbar-width:none } #pn-syco .syco-page::-webkit-scrollbar{ display:none } /* on a phone the nameplate must leave room for news underneath it (spec §2: ≤20% of the first view). It is still the biggest thing on the page, just not the only thing on it. */ #pn-syco .syco-mark--hero{ font-size:clamp(46px,15vw,66px) } #pn-syco .syco-hed{ font-size:clamp(27px,7.4vw,38px) } /* NO min-height here. The desktop rule three hundred lines up documents why: min-height grows the ROW while the type stays at its top, so the leader dots — which align to the row's bottom — drop onto a line of their own, joined to nothing. This block re-introduced the very bug that comment describes, and it did it on the first screen of the phone. The 13px padding already yields ~45.5px, clear of the 44px floor. Caught in the design critique, 2026-08-16. */ } /* ══ THE REBUILT ITEM SEMANTICS ═══════════════════════════════════════════════════════════════ The expandable story is now
>

>