/* ========================================================================== DigitallyByAlvin — Journal The only stylesheet in this plugin written by hand. Everything the galleries already had comes from two files this does not duplicate: the tokens and base components in Additional CSS (global, so already present here), and dv2-shared.css, generated from the gallery generator. What is left is what a gallery never needed — a list of entries, a measure for reading, and the core block styles that let Alvin write in the ordinary WordPress editor and have it come out in the site's voice. ========================================================================== */ /* --- the masthead when there is no photograph ---------------------------- .dv2-gal pads the band for a picture behind the type. With no featured image the band is type on ink, and the same padding leaves it floating a long way down an otherwise empty screen. Trimmed rather than removed, so an empty Journal still reads as a designed page and not as a mistake. */ .dv2-root .dv2-mast-slot:not(.dv2-mast){padding-block:calc(var(--sec) * .72 + 5vh) var(--sp-l)} /* --- the Journal's own masthead ------------------------------------------ The one place on this site where a masthead photograph is dimmed, and the photograph is why. Every other masthead had darkness of its own to hide the type in -- a night stage, a black wall, a dark steppe. This one is a man on snow, and snow is the worst ground there is for light type: near-white edge to edge, with no quiet corner anywhere in the frame. So the picture is dimmed and the ink is lightened, rather than the other way round. brightness(.52) drops the snow to a soft grey, which buys two things: the type needs far less ink over it, and the hard vertical seam the standard scrim leaves where it ends against a bright field simply goes away. The ramp below is the standard one relaxed -- .88 rather than .96 at the left, clear by 66% rather than 76% -- which is what leaves Alvin fully lit instead of half in shadow. Measured against the real type boxes: 1440 headline 13.70:1 standfirst 7.84:1 eyebrow 6.79:1 1920 headline 13.70:1 standfirst 7.86:1 eyebrow 6.79:1 phone headline 11.59:1 standfirst 6.72:1 eyebrow 5.06:1 The phone eyebrow at 5.06 is the binding constraint and is what set .52. THIS IS SCOPED TO .dv2j-hero AND MUST STAY THAT WAY. A single entry's masthead is whatever Alvin set as its featured image, cannot be measured in advance, and therefore keeps the conservative scrim that clears AA against a pure white photograph. Relaxing the ramp there would trade a guarantee for a picture nobody has looked at. */ .dv2-root .dv2j-hero .dv2-mast-img{filter:saturate(.74) brightness(.52)} .dv2-root .dv2j-hero .dv2-mast-ink{background: linear-gradient(180deg,rgba(10,10,14,.985) 0,rgba(10,10,14,.975) 130px, rgba(10,10,14,0) 260px), linear-gradient(0deg,rgba(10,10,14,1) 0,rgba(10,10,14,.85) 60px, rgba(10,10,14,0) 190px), linear-gradient(90deg,rgba(10,10,14,.88) 0%,rgba(10,10,14,.84) 30%, rgba(10,10,14,.72) 44%,rgba(10,10,14,.35) 52%,rgba(10,10,14,.06) 60%, rgba(10,10,14,0) 66%,rgba(10,10,14,0) 100%)} /* Below 900px the shared stylesheet swaps the horizontal scrim for a vertical one and resets the size to cover, both of which are right here. The hero simply does not opt into .dv2-mast-deep: on this frame the deep ramp never goes lighter than 88% ink and turns a photographer into a shape, while the standard one clears AA because the picture is already dimmed. Nothing to override, so nothing is written. */ /* --- one entry ----------------------------------------------------------- The picture, then a rule of small caps, then the title, then the standfirst. Order matters: the photograph is the reason anyone stops, so it goes first and everything under it is an explanation of what they are looking at. */ .dv2-root .dv2j-entry{display:block} .dv2-root .dv2j-tile{margin-bottom:var(--sp-s)} /* Category and date on one line, pushed apart, over the hairline the site uses between sections. Wraps to two lines rather than colliding on a phone. max-width:none because the base stylesheet caps every paragraph at a reading measure — sensible for prose and wrong for this, which is a rule across the entry rather than something anyone reads across. Measured at 869px before the override: the line and its hairline stopped at 398px inside a 781px entry, so the date sat marooned in the middle and the rule underlined half a photograph. */ .dv2-root .dv2j-line{display:flex;flex-wrap:wrap;gap:var(--sp-xs) var(--sp-m); align-items:baseline;justify-content:space-between;margin:0;max-width:none; padding-bottom:var(--sp-xs);border-bottom:1px solid var(--hairline-soft)} /* The rule that wipes in under an entry title is brass, not bone. Brass is the site's one accent — it is already the hairline under a caption and the line under .dv2-link — and a white underline on white type reads as a browser default rather than as a decision. */ .dv2-root .dv2j-title{margin-top:var(--sp-s)} .dv2-root .dv2j-title a{color:inherit;text-decoration:none; background-image:linear-gradient(var(--brass-lit),var(--brass-lit)); background-size:0 1px;background-repeat:no-repeat; background-position:0 100%; transition:background-size var(--d-wipe) var(--e-settle)} .dv2-root .dv2j-title a:hover, .dv2-root .dv2j-title a:focus-visible{background-size:100% 1px} /* The standfirst is body copy, not a caption: it is read, so it gets a real line height and a measure, and it stops well short of the column. */ .dv2-root .dv2j-stand{margin-top:var(--sp-s);font-size:var(--s-body); line-height:1.75;color:var(--ash);max-width:46ch} /* --- the unfolded foldable, 768 to 899 ----------------------------------- Same problem the galleries have and the same remedy, for the same measured reason: below 900px every column collapses to the full measure, which is right at 390 and wrong at 884. An upright photograph at 884 renders over a thousand pixels tall and you scroll a frame at a time. Capping the plate rather than the grid item, so anything positioned inside it follows. Keyed off the orientation the template writes rather than a ratio class, because the shape here is whatever Alvin uploaded. The cap goes on the whole entry, not on the plate. Capping only the picture left the title, the date and its hairline running the full 781px past the edge of a 593px photograph, which reads as a text block that has come loose from its illustration. Entry and picture share one measure instead. */ @media (min-width:768px) and (max-width:899px){ .dv2-root .dv2j-entry{max-width:76%} .dv2-root .dv2j-entry[data-ori="portrait"]{max-width:58%} } /* --- pagination ---------------------------------------------------------- .dv2-frames already carries padding-bottom:var(--sec) for a page that ends on a photograph. When a pager follows, that padding lands between the last entry and the pager instead of below it, so the list gives its bottom space up and the pager owns the run-out to the Enquire block. */ .dv2-root .dv2j-list{padding-bottom:0} .dv2-root .dv2j-pager{margin-top:clamp(56px,7vw,132px);padding-bottom:var(--sec)} .dv2-root .dv2j-pager .dv2-next span:empty{display:none} .dv2-root .dv2j-pager a{position:relative;display:inline-block;color:var(--bone); font-size:var(--s-meta);font-weight:300;letter-spacing:var(--t-button); text-transform:uppercase;text-decoration:none;padding-block:var(--sp-xs); min-height:44px} .dv2-root .dv2j-pager a::after{content:"";position:absolute;left:0;right:0; bottom:10px;height:1px;background:var(--brass);transform:scaleX(0); transform-origin:left center; transition:transform var(--d-wipe) var(--e-settle)} .dv2-root .dv2j-pager a:hover::after, .dv2-root .dv2j-pager a:focus-visible::after{transform:scaleX(1)} /* ========================================================================== THE ARTICLE This is the part that has to survive whatever Alvin writes. Everything below styles core block output by its own class names, so the workflow is the plain one: type in the editor, drop pictures in, publish. ========================================================================== */ .dv2-root .dv2j-article{padding-top:var(--sp-xl);padding-bottom:var(--sec)} /* --- the container, and why it is not the grid --------------------------- The site's twelve-track grid has a rail down its left, so NO column in it sits centred on the page: column 3 to 11 runs 269 to 1242 inside a 1425 viewport, whose centre is 712 against the column's 755. Any image asking to break out of that column therefore lands 43px right of centre, and no amount of calc(50% - 50vw) fixes it, because that expression assumes a containing block the page has centred. So the article gets a plain centred block instead, with the grid's own max-width and gutter, plus a left indent of exactly rail + column gap. That puts the first character of the body on the same vertical as the masthead type above it — the grid's column 2 — while making the breakout arithmetic a subtraction of known tokens rather than a guess about position. */ .dv2-root .dv2j-measure{max-width:var(--wide);margin-inline:auto; padding-right:var(--gutter); padding-left:calc(var(--gutter) + var(--rail) + var(--col-gap))} @media (max-width:899px){ /* Below 900 the grid's columns already collapse to the full measure, so the masthead type starts at the gutter and the body follows it there. */ .dv2-root .dv2j-measure{padding-left:var(--gutter)} } /* --- the measure, in pixels, and why not in ch -------------------------- THE ch UNIT WAS A BUG HERE, not a preference. ch is the width of a zero IN THE ELEMENT'S OWN FONT, so one rule of max-width:52ch produced 458px on a Jost paragraph at 15px and 1195px on a Cormorant h2 at 2rem — the heading ran two and a half times wider than the paragraphs beneath it and they shared no edge at all. Measured on the live post at 1440 before this was fixed. A measure is a property of the COLUMN, so it is set once, in pixels, and every direct child inherits the same right-hand edge. --dv2j-measure is also what an ordinary photograph is capped to, at Alvin's asking: a picture with no alignment set matches the text column, and Wide or Full width is chosen per image when a frame deserves the room. THE TYPE GETS BIGGER RATHER THAN THE LINE GETTING LONGER. The complaint that started this was a 458px column of text sitting in a 1425px window with 808px of nothing to the right of it. The fix is not simply a wider column: at 15px, 600px would carry 92 characters to the line, which is well past the point where the eye loses its place on the return sweep. So the body goes from 15.2px to 19px on a desktop and the column to 600px, which holds about 73 characters — the same comfortable line, drawn larger, in a column a third wider. Weight 300 rather than 200 because hairline type reverses badly on dark grounds. */ .dv2-root .dv2j-prose{--dv2j-measure:none; color:var(--ash);font-size:clamp(1rem,.86rem + .62vw,1.19rem);font-weight:300; line-height:1.78;letter-spacing:.005em} @media (min-width:900px){ .dv2-root .dv2j-prose{--dv2j-measure:600px} } /* --- vertical rhythm, and a specificity trap ---------------------------- Every direct child is reset to no margin and then given its top margin by the adjacent-sibling rule, in that order, at the SAME specificity so the later one wins. The first version set the flow with `> * + *` and then reset margins on the elements themselves -- p{margin:0}, blockquote{margin:0}, ul{margin:0}. Each of those carries an element selector, so each is one point more specific than the flow rule and silently cancelled it. Paragraphs, quotes and lists ran together with no space at all between them, while headings kept their space, because their rule was specific enough to survive. Anything below that wants MORE room than --sp-m still says so with its own element or block selector, which is exactly the specificity that broke this, used deliberately. */ .dv2-root .dv2j-prose > *{max-width:var(--dv2j-measure);margin:0} .dv2-root .dv2j-prose > * + *{margin-top:var(--sp-m)} /* The first paragraph carries a little more weight, the way a standfirst does, without needing Alvin to mark it up as anything special. */ /* Relative to the body, not to --s-lead. The token is a fixed clamp that tops out around 18px, which was larger than the body at 15px and SMALLER than it once the body went to 19px — the opening paragraph would have been quietly demoted. An em keeps it a step above whatever the body is doing. */ .dv2-root .dv2j-prose > p:first-child{font-size:1.1em;line-height:1.65; color:var(--bone)} /* --- headings ------------------------------------------------------------ h2 and h3 in the editor become the site's h2 and h3. h1 is deliberately folded into h2: the page already has one h1, the entry title in the masthead, and a second would be wrong for both search engines and screen readers. */ .dv2-root .dv2j-prose h1, .dv2-root .dv2j-prose h2, .dv2-root .dv2j-prose h3, .dv2-root .dv2j-prose h4{font-family:var(--f-display);font-weight:300; color:var(--bone);letter-spacing:.02em;text-wrap:balance; font-variant-numeric:oldstyle-nums;margin:0;line-height:1.25} .dv2-root .dv2j-prose h1, .dv2-root .dv2j-prose h2{font-size:var(--s-h2)} .dv2-root .dv2j-prose h3{font-size:var(--s-h3)} .dv2-root .dv2j-prose h4{font-size:calc(var(--s-h3) * .82)} .dv2-root .dv2j-prose > h1, .dv2-root .dv2j-prose > h2, .dv2-root .dv2j-prose > h3, .dv2-root .dv2j-prose > h4{margin-top:var(--sp-l)} /* --- links in the body --------------------------------------------------- Underlined, in bone, with the brass thickening on hover. Not the small-caps .dv2-link treatment: that is a button in all but name and reads as furniture in the middle of a sentence. */ .dv2-root .dv2j-prose a{color:var(--bone);text-decoration:none; border-bottom:1px solid var(--brass-soft); transition:border-color var(--d-tone) var(--e-tone)} .dv2-root .dv2j-prose a:hover, .dv2-root .dv2j-prose a:focus-visible{border-bottom-color:var(--brass-lit)} .dv2-root .dv2j-prose strong{color:var(--bone);font-weight:400} .dv2-root .dv2j-prose em{font-style:italic} /* --- lists --------------------------------------------------------------- */ .dv2-root .dv2j-prose ul, .dv2-root .dv2j-prose ol{padding-left:1.4em} .dv2-root .dv2j-prose li + li{margin-top:var(--sp-xs)} .dv2-root .dv2j-prose li::marker{color:var(--brass)} /* --- quotes -------------------------------------------------------------- A brass rule at the left and the display face. No quotation marks drawn in: the indent and the change of face already say what it is. */ .dv2-root .dv2j-prose blockquote, .dv2-root .dv2j-prose .wp-block-quote{padding-left:var(--sp-m); border-left:1px solid var(--brass-soft);font-family:var(--f-display); font-size:var(--s-lead);line-height:1.55;color:var(--bone);font-weight:300} .dv2-root .dv2j-prose blockquote p{margin:0} .dv2-root .dv2j-prose blockquote p + p{margin-top:var(--sp-s)} .dv2-root .dv2j-prose blockquote cite, .dv2-root .dv2j-prose .wp-block-quote cite{display:block;margin-top:var(--sp-s); font-family:var(--f-ui);font-size:var(--s-meta);font-weight:200; letter-spacing:var(--t-nav);text-transform:uppercase;color:var(--ash-dim); font-style:normal} .dv2-root .dv2j-prose .wp-block-pullquote{padding:0;border:0;text-align:left} .dv2-root .dv2j-prose .wp-block-pullquote blockquote{border-left:0;padding-left:0} .dv2-root .dv2j-prose .wp-block-pullquote p{font-family:var(--f-display); font-size:var(--s-h3);line-height:1.35;color:var(--bone)} /* --- images -------------------------------------------------------------- The one place the measure is allowed to break. A photograph is why anyone is here, so wide and full-width images take the room the words are denied, and every image sits on the void black the plates use so a light frame does not glow against the page. */ .dv2-root .dv2j-prose figure{margin-inline:0} .dv2-root .dv2j-prose img{display:block;width:100%;height:auto; background:var(--ink-void)} .dv2-root .dv2j-prose .wp-block-image, .dv2-root .dv2j-prose .wp-block-gallery, .dv2-root .dv2j-prose .wp-block-embed, .dv2-root .dv2j-prose .wp-block-video{margin-top:var(--sp-l)} .dv2-root .dv2j-prose .wp-block-image + *, .dv2-root .dv2j-prose .wp-block-gallery + *{margin-top:var(--sp-l)} .dv2-root .dv2j-prose figcaption, .dv2-root .dv2j-prose .wp-element-caption{margin-top:var(--sp-xs); font-family:var(--f-ui);font-size:var(--s-meta);font-weight:200; letter-spacing:var(--t-nav);text-transform:uppercase;color:var(--ash-dim); max-width:var(--dv2j-measure)} /* Wide and Full width, expressed as subtractions of the container's own padding rather than as viewport arithmetic. Wide gives back the left indent, so the picture runs from the page's gutter on the left to the gutter on the right — the site's full measure, the width a gallery bleed frame gets. Full width gives back the gutters as well, so the picture touches both edges of the page. It stops at --wide (1560px) on a very large monitor rather than running to the true viewport edge, and that is deliberate: 100vw counts the scrollbar, so a genuine viewport-width image overshoots by fifteen pixels and puts a horizontal scrollbar on the article. Every other element on this site is capped at --wide too, so the picture is in good company. */ .dv2-root .dv2j-prose .alignwide{max-width:none;width:auto; margin-left:calc(-1 * (var(--rail) + var(--col-gap)));margin-right:0} .dv2-root .dv2j-prose .alignfull{max-width:none;width:auto; margin-left:calc(-1 * (var(--gutter) + var(--rail) + var(--col-gap))); margin-right:calc(-1 * var(--gutter))} .dv2-root .dv2j-prose .alignfull img, .dv2-root .dv2j-prose .alignwide img{width:100%} @media (max-width:899px){ /* The indent is gone below 900, so Wide has nothing to give back and only Full width still reaches for the page edges. */ .dv2-root .dv2j-prose .alignwide{margin-left:0} .dv2-root .dv2j-prose .alignfull{ margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter))} } /* The caption does not go with the picture, it goes with the text. A breakout figure pulls its whole contents left, caption included, and a full-width one put the caption hard against the edge of the screen with no margin at all — the only line on the site starting at x=0. The indent the figure gave up is handed back to the caption alone, at both bands, so every caption in an entry starts on the same vertical as the prose. */ .dv2-root .dv2j-prose .alignfull > figcaption{padding-inline:var(--gutter)} @media (min-width:900px){ .dv2-root .dv2j-prose .alignfull > figcaption{ padding-left:calc(var(--gutter) + var(--rail) + var(--col-gap))} .dv2-root .dv2j-prose .alignwide > figcaption{ padding-left:calc(var(--rail) + var(--col-gap))} } .dv2-root .dv2j-prose .alignleft, .dv2-root .dv2j-prose .alignright{max-width:min(46%,320px)} .dv2-root .dv2j-prose .alignleft{float:left;margin:6px var(--sp-m) var(--sp-m) 0} .dv2-root .dv2j-prose .alignright{float:right;margin:6px 0 var(--sp-m) var(--sp-m)} @media (max-width:640px){ .dv2-root .dv2j-prose .alignleft, .dv2-root .dv2j-prose .alignright{float:none;max-width:100%; margin-left:0;margin-right:0} } .dv2-root .dv2j-prose .aligncenter{margin-left:auto;margin-right:auto} /* Galleries keep the site's column gap rather than the editor's default. */ .dv2-root .dv2j-prose .wp-block-gallery.has-nested-images{gap:var(--col-gap)} /* --- rules, code, tables ------------------------------------------------- */ .dv2-root .dv2j-prose hr, .dv2-root .dv2j-prose .wp-block-separator{border:0;height:1px; background:var(--hairline);margin-block:var(--sp-l); max-width:var(--dv2j-measure)} .dv2-root .dv2j-prose code, .dv2-root .dv2j-prose pre{font-family:ui-monospace,SFMono-Regular,Menlo, Consolas,monospace;font-size:.86em} .dv2-root .dv2j-prose code{color:var(--bone);background:var(--charcoal); padding:.14em .38em;border-radius:2px} .dv2-root .dv2j-prose pre{background:var(--charcoal);color:var(--ash); padding:var(--sp-s);overflow-x:auto;line-height:1.6} .dv2-root .dv2j-prose pre code{background:none;padding:0} .dv2-root .dv2j-prose table{width:100%;border-collapse:collapse; font-size:var(--s-body)} .dv2-root .dv2j-prose th, .dv2-root .dv2j-prose td{text-align:left;padding:var(--sp-xs) var(--sp-s) var(--sp-xs) 0;border-bottom:1px solid var(--hairline-soft); vertical-align:baseline} .dv2-root .dv2j-prose th{color:var(--bone);font-weight:300; font-size:var(--s-meta);letter-spacing:var(--t-nav);text-transform:uppercase} /* WordPress's own utility classes, so the editor's colour and size controls do not silently do nothing. */ .dv2-root .dv2j-prose .has-text-align-center{text-align:center} .dv2-root .dv2j-prose .has-text-align-right{text-align:right} .dv2-root .dv2j-prose .has-drop-cap:first-letter{float:left; font-family:var(--f-display);font-size:3.4em;line-height:.82; margin:.06em .12em 0 0;color:var(--bone)} /* Prev and next at the foot of an entry. The small-caps label sits above a title in the display face, so the two lines say different things: one is direction, the other is what you would be going to. */ .dv2-root .dv2j-step{text-transform:none;letter-spacing:.01em; font-family:var(--f-display);font-size:var(--s-h3);line-height:1.25; max-width:22ch} .dv2-root .dv2j-step em{display:block;font-family:var(--f-ui);font-style:normal; font-size:var(--s-meta);font-weight:200;letter-spacing:var(--t-nav); text-transform:uppercase;color:var(--ash-dim);margin-bottom:var(--sp-xs)} .dv2-root .dv2j-step--r{text-align:right;margin-left:auto} /* --- the footer of the entry --------------------------------------------- */ .dv2-root .dv2j-tags{margin-top:var(--sp-l);padding-top:var(--sp-s); border-top:1px solid var(--hairline-soft)} /* "Tagged" sits in brass, letterspaced, the way every other label on this site does, so the row reads as a label followed by a list rather than as a sentence that has lost its opening. */ .dv2-root .dv2j-tags-label{display:inline-block;margin-right:var(--sp-s); font-size:var(--s-micro);letter-spacing:var(--t-eyebrow);text-transform:uppercase; color:var(--brass)} .dv2-root .dv2j-tags a{color:var(--ash-dim);text-decoration:none; white-space:nowrap; transition:color var(--d-tone) var(--e-tone)} .dv2-root .dv2j-tags a:hover, .dv2-root .dv2j-tags a:focus-visible{color:var(--bone)} .dv2-root .dv2j-pages{margin-top:var(--sp-l)} /* --- a photograph in the body opens --------------------------------------- The class is added by journal.js, so a browser that never runs it shows no affordance for something it cannot do. The cursor is the whole affordance: no ring, no icon, nothing drawn over the picture. */ .dv2-root .dv2j-prose img.dv2j-open{cursor:zoom-in} /* The overlay lives on the body rather than inside .dv2-root, so its rules are not scoped like everything above. Tokens are read off .dv2-root's own values, repeated here rather than inherited for that reason. */ .dv2j-view{position:fixed;inset:0;z-index:9000;display:flex; align-items:center;justify-content:center;flex-direction:column; gap:16px;padding:clamp(20px,4vw,56px); background:rgba(6,6,10,.96);cursor:zoom-out} .dv2j-view[hidden]{display:none} .dv2j-view-stage{display:flex;flex-direction:column;align-items:center; gap:14px;max-width:100%;max-height:100%;cursor:auto} .dv2j-view-img{display:block;max-width:100%;max-height:82vh; width:auto;height:auto;object-fit:contain;background:#06060A} .dv2j-view-cap{margin:0;max-width:66ch;text-align:center; font-family:"Jost","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:.76rem;font-weight:200;letter-spacing:.22em; text-transform:uppercase;color:#A0A0AA} .dv2j-view-cap[hidden]{display:none} .dv2j-view-x{position:absolute;top:clamp(14px,2.4vw,28px); right:clamp(14px,2.4vw,28px);width:44px;height:44px; appearance:none;-webkit-appearance:none;background:none;border:0; padding:0;cursor:pointer} .dv2j-view-x::before,.dv2j-view-x::after{content:"";position:absolute; left:12px;top:21px;width:20px;height:1px;background:#F5F4F1} .dv2j-view-x::before{transform:rotate(45deg)} .dv2j-view-x::after{transform:rotate(-45deg)} .dv2j-view-x:focus-visible{outline:1px solid #B99A6B;outline-offset:2px} /* --- honour the reduced-motion setting ----------------------------------- */ @media (prefers-reduced-motion:reduce){ .dv2-root .dv2j-title a, .dv2-root .dv2j-pager a::after, .dv2-root .dv2j-prose a{transition:none} } /* ═══════════════════════════════════════════════════════════════════════════ THE INDEX GRID — added 1.1.0, 13 September 2026 ═══════════════════════════════════════════════════════════════════════════ Replaces the tall alternating entry list. That layout gave one photograph a lot of room, which was right at one post and wrong at eleven: the index had become several screens of scrolling to reach four titles. The reference Alvin brought was a light design that builds its structure out of card chrome -- white panel, soft shadow, rounded corner, filled pill for the category. Those are the right tools on a pale ground and the wrong ones here; this system has never used a shadow, a radius or a filled button anywhere, and one would read as borrowed from another site. So the structure is the same -- three across, photograph on top, category and date, serif headline, short standfirst -- and the materials are this site's: a hairline, a brass rule, and space. ────────────────────────────────────────────────────────────────────────── */ /* ── The filter bar ────────────────────────────────────────────────────── Sticky, because with the archive list underneath the page is long and the filters are useless once they have scrolled away. */ .dv2-root .dv2j-filters{position:sticky;top:0;z-index:20; border-bottom:1px solid var(--hairline-soft); background:rgba(10,10,14,.88); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2)} .dv2-root .dv2j-filters-in{display:flex;align-items:baseline; justify-content:space-between;gap:var(--sp-m);flex-wrap:wrap; padding-block:var(--sp-s)} .dv2-root .dv2j-filter-set{display:flex;gap:var(--sp-m);flex-wrap:wrap;align-items:baseline} .dv2-root .dv2j-filter{padding:0 0 6px;position:relative; font-size:var(--s-micro);letter-spacing:var(--t-nav);text-transform:uppercase; color:var(--ash-mute);text-decoration:none; transition:color var(--d-tone) var(--e-tone)} .dv2-root .dv2j-filter::after{content:"";position:absolute;left:0;right:0;bottom:0; height:1px;background:var(--brass-lit);transform:scaleX(0);transform-origin:0 50%; transition:transform var(--d-wipe) var(--e-settle)} .dv2-root .dv2j-filter:hover, .dv2-root .dv2j-filter:focus-visible{color:var(--bone)} .dv2-root .dv2j-filter[aria-current="true"]{color:var(--bone)} .dv2-root .dv2j-filter[aria-current="true"]::after{transform:scaleX(1)} .dv2-root .dv2j-count{font-size:var(--s-micro);letter-spacing:.1em; color:var(--ash-mute);font-variant-numeric:tabular-nums; white-space:nowrap;margin:0;max-width:none} /* ── The grid ───────────────────────────────────────────────────────────── */ .dv2-root .dv2j-grid{display:grid;grid-template-columns:repeat(3,1fr); gap:var(--sp-l) var(--col-gap);padding-block:var(--sp-l)} @media (max-width:1099px){ .dv2-root .dv2j-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:699px){ .dv2-root .dv2j-grid{grid-template-columns:1fr;gap:var(--sp-l)} } /* A card stands down from the reveal's default lift -- twelve blocks each travelling the full distance at once is too much movement in one place. */ .dv2-root .dv2j-card{display:flex;flex-direction:column;min-width:0} .dv2-root .dv2j-card.dv2-rev{transform:translateY(14px)} .dv2-root .dv2j-card.dv2-rev.lit{transform:none} .dv2-root .dv2j-grid > .dv2j-card:nth-child(3n+2){transition-delay:70ms} .dv2-root .dv2j-grid > .dv2j-card:nth-child(3n+3){transition-delay:140ms} .dv2-root .dv2j-card[hidden]{display:none} .dv2-root .dv2j-card-plate{position:relative;display:block;overflow:hidden; background:var(--charcoal);aspect-ratio:3/2;margin-bottom:var(--sp-s)} .dv2-root .dv2j-card-plate img{width:100%;height:100%;object-fit:cover; filter:saturate(.92); transition:transform var(--d-develop) var(--e-develop), filter var(--d-glass) var(--e-develop)} .dv2-root .dv2j-card:hover .dv2j-card-plate img{transform:scale(1.028);filter:saturate(1)} .dv2-root .dv2j-card-plate::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(10,10,14,0) 55%,rgba(10,10,14,.45))} /* An entry with no featured image keeps its place in the grid rather than collapsing and pulling the row out of line. */ .dv2-root .dv2j-card-plate--bare{background: linear-gradient(160deg,var(--charcoal) 0%,var(--ink-soft) 100%)} .dv2-root .dv2j-card-meta{display:flex;align-items:baseline;gap:var(--sp-s); flex-wrap:wrap;margin:0 0 var(--sp-xs);max-width:none} .dv2-root .dv2j-card-cat{font-size:var(--s-micro);letter-spacing:var(--t-eyebrow); text-transform:uppercase;color:var(--brass);text-decoration:none;white-space:nowrap; transition:color var(--d-tone) var(--e-tone)} .dv2-root .dv2j-card-cat:hover, .dv2-root .dv2j-card-cat:focus-visible{color:var(--brass-lit)} .dv2-root .dv2j-card-date{font-size:var(--s-micro);letter-spacing:.12em; text-transform:uppercase;color:var(--ash-mute); font-variant-numeric:tabular-nums;white-space:nowrap} .dv2-root .dv2j-card-date::before{content:"";display:inline-block;width:14px;height:1px; background:var(--hairline);vertical-align:.28em;margin-right:var(--sp-s)} .dv2-root .dv2j-card-title{font-family:var(--f-display);font-weight:400; font-size:var(--s-h3);line-height:1.16;letter-spacing:-.005em; color:var(--bone);margin:0 0 var(--sp-xs)} .dv2-root .dv2j-card-title a{color:inherit;text-decoration:none; background-image:linear-gradient(var(--brass-lit),var(--brass-lit)); background-size:0 1px;background-repeat:no-repeat;background-position:0 100%; transition:background-size var(--d-wipe) var(--e-settle)} .dv2-root .dv2j-card:hover .dv2j-card-title a, .dv2-root .dv2j-card-title a:focus-visible{background-size:100% 1px} .dv2-root .dv2j-card-stand{font-size:.92rem;line-height:1.66; color:var(--ash-dim);margin:0;max-width:none} /* ── Empty states ───────────────────────────────────────────────────────── */ .dv2-root .dv2j-empty, .dv2-root .dv2j-none{padding-block:var(--sp-xl);color:var(--ash-dim); font-size:var(--s-lead);max-width:56ch} .dv2-root .dv2j-none[hidden]{display:none} .dv2-root .dv2j-empty-out{display:inline-block;margin-left:var(--sp-s)} /* ── The pager, now on the plain measure rather than in the grid ────────── */ .dv2-root .dv2j-pager{padding-block:var(--sp-m) var(--sp-xl); border-top:1px solid var(--hairline-soft)} /* ── Everything, by year ────────────────────────────────────────────────── */ .dv2-root .dv2j-archive{border-top:1px solid var(--hairline); padding-block:var(--sp-xl)} .dv2-root .dv2j-arch-head{display:flex;align-items:baseline; justify-content:space-between;gap:var(--sp-m);flex-wrap:wrap; margin-bottom:var(--sp-l)} .dv2-root .dv2j-arch-title{font-family:var(--f-display);font-weight:300; font-size:var(--s-h2);line-height:1.05;color:var(--bone);margin:0} .dv2-root .dv2j-year{display:grid;grid-template-columns:minmax(0,7rem) 1fr; gap:var(--sp-m);padding-block:var(--sp-m); border-top:1px solid var(--hairline-soft)} @media (max-width:699px){ .dv2-root .dv2j-year{grid-template-columns:1fr;gap:var(--sp-s)} } .dv2-root .dv2j-year-no{font-family:var(--f-display);font-size:2.1rem;line-height:1; color:var(--ash-mute);font-variant-numeric:tabular-nums; position:sticky;top:calc(var(--sp-xl) + 10px);align-self:start; margin:0;max-width:none} .dv2-root .dv2j-rows{display:flex;flex-direction:column} .dv2-root .dv2j-row{display:grid;grid-template-columns:8.5rem 1fr auto; gap:var(--sp-m);align-items:baseline;padding-block:var(--sp-s); border-bottom:1px solid var(--hairline-soft);text-decoration:none; transition:padding-left var(--d-wipe) var(--e-settle)} .dv2-root .dv2j-row:hover, .dv2-root .dv2j-row:focus-visible{padding-left:var(--sp-xs)} .dv2-root .dv2j-row:last-child{border-bottom:0} @media (max-width:699px){ .dv2-root .dv2j-row{grid-template-columns:1fr;gap:4px} } .dv2-root .dv2j-row-date{font-size:var(--s-micro);letter-spacing:.12em; text-transform:uppercase;color:var(--ash-mute);font-variant-numeric:tabular-nums} .dv2-root .dv2j-row-title{font-family:var(--f-display);font-size:1.18rem; line-height:1.3;color:var(--ash);transition:color var(--d-tone) var(--e-tone)} .dv2-root .dv2j-row:hover .dv2j-row-title{color:var(--bone)} .dv2-root .dv2j-row-cat{font-size:var(--s-micro);letter-spacing:var(--t-nav); text-transform:uppercase;color:var(--ash-mute);white-space:nowrap; transition:color var(--d-tone) var(--e-tone)} .dv2-root .dv2j-row:hover .dv2j-row-cat{color:var(--brass)} /* Readers who have asked for less movement get the layout and none of the travel. The reveal still runs, because without it the cards never appear. */ @media (prefers-reduced-motion:reduce){ .dv2-root .dv2j-card.dv2-rev{transform:none} .dv2-root .dv2j-grid > .dv2j-card{transition-delay:0s} .dv2-root .dv2j-card:hover .dv2j-card-plate img{transform:none} .dv2-root .dv2j-row:hover{padding-left:0} }