/* ========================================================================== JAGRITI DHAM — THE BLOG · index.php / archive.php / single.php /care-for-elders-blogs/, every category & month archive, every post css/blog-lux.css — FINAL (the panel's House Journal, final cut) 2026-09-12 Enqueued after style.css and responsive.css (functions.php:428). Wins on specificity; `!important` only where the theme flags first (L6, L7, L9). ========================================================================== THE IDEA -------- The blog is the house's journal. The landing is its FRONT PAGE: a centred masthead (eyebrow · "Blog" in Fraunces · an italic brass deck · a ruled index numbered 01 / 02); LONG STAY as the front — the newest story a LEAD across two of three columns with a 4:3 photograph and a 40px title, two cards set tighter beside it, the rest in a ruled grid with hairlines between the rows; STAYCATION as the SECOND ROOM: the house's deep-green band (home-lux.css:2908, quoted) bled to the viewport, its stories as half-page postcards on the green. The aside is the back-page INDEX: three ruled rows in tracked capitals, each list in columns. The single is a magazine article: a 44px Fraunces title centred over a deck-style meta line between two hairlines, the photograph as a matted plate on the measure, the story on a 66ch column of 18px Karla with a Fraunces standfirst. The current page is the one green cell. The archive is the same front with its own masthead, no lead. THE MATERIAL RUN: header → PAPER (grained: masthead, front page, index, article) → GREEN (Staycation) → PAPER → contact-lux's brass → footer's green. PLATE (flat #fdfbf6) is for the objects laid on the paper: the postcards, the page cells, the nav cells, the figure's mat, the fields. PAPER HAS GRAIN. PLATE DOES NOT. (longstay-lux's rule.) FINAL CUT — what changed after the two syntheses were judged: the wrappers carry NO top padding (the masthead's and the article head's air is padding on the head itself, so the offset check reads +20 exactly); nothing inside a photograph moves on hover (the title inks, the arrow slides, the postcards lift); the single's meta sits between two hairlines on the measure with the date in brass ink; the featured photograph is a matted plate with the house diamond under it (photo-gallery-lux's mat); the card meta and "Read the story" a half-step larger (13.5px); the standfirst 19px on phones; comments.php's real navigation markup (`nav#comment-nav-below.navigation > h1.assistive-text + .nav-previous / .nav-next`) is the one styled; empty editor paragraphs are hidden. ========================================================================== LOAD-BEARING — DO NOT "TIDY" ANY OF THESE. Each fails SILENTLY. ========================================================================== L1 EVERY SELECTOR STARTS `.jd-blog`, `.jd-article`, `.jd-blog-aside` or `.jd-blog-pagination`. `.widget`, `.comments-area`, `.submit`, `.page-numbers` and `.navigation` exist on tag.php / author.php with the OLD markup; nothing here may reach them. The header, `#contact`, the footer and `.container` are never named. L2 NO HEADER OFFSET. header-lux.css:949 `.innerbanner{height:var(--jd-h- total) !important; margin-bottom:20px}` already puts both wrappers at header-bottom + 20 (110 / 114 / 166 at 375 / 768 / 1280). Neither wrapper carries a margin-top OR a padding-top; the air is PADDING on `.jd-blog-head` / `.jd-article-head`. L3 THE GRID IS SIX TRACKS FROM 992; a card spans two. The LEAD spans four tracks and two rows; cards 2 and 3 stack beside it (16:9 crop, excerpt clamped to two lines, so the stacked pair finishes within ~20–110px of the lead's foot). Card k ≥ 4 lands in column (k+2) mod 3 + 1 — the SAME residue as a grid with no lead — so one set of closing rules serves the landing and the archive: lone last `:nth-child(3n+1):last-child` → spans all six pair last `:nth-child(3n+1):nth-last-child(2)` and `:nth-child(3n+2):last-child` → three each (the lead and card 2 are excluded with :not()). Inside `@supports selector(:has(*))` a 2-card landing makes both cards half-width and a 1-card landing one wide card. At 768–991 the grid is two columns, the lead spans both as a horizontal card, and the lone last card (`:nth-child(2n):last-child` after a lead, `:nth-child(odd):last- child` without one) spans both the same way. Related stories: 1 / 1 (horizontal) / 3 on their own `--3` grid. Verified for 1–12 cards. The grid's children must stay `article.jd-post` only (the templates guarantee it); a wrapper between .jd-blog-grid and the cards breaks the placement. L4 THE BAND IS A PSEUDO-ELEMENT SIZED IN cqw. `.jd-blog{container-type: inline-size}` makes 100cqw the body's width WITHOUT the scrollbar, so `.jd-blog-staycation::before{left:calc(50% - 50cqw); right:calc(50% - 50cqw)}` paints the green exactly viewport-wide at z-index:-1 inside the section's own stacking context (`isolation:isolate`) with zero spill and NO overflow clip on the wrapper; the content stays on the container's grid lines. Browsers without cqw (`@supports not (width: 1cqw)`) get the 50vw version behind `.jd-blog{overflow-x:hidden}`. L5 EVERY PHOTOGRAPH IS `aspect-ratio` + `object-fit:cover`, never a height. 3:2 on the cards and the single's figure; 4:3 on the lead from 768; 16:9 on cards 2–3 from 992. The @supports fallback pads the anchor and absolutely positions the image for Safari ≤ 14 (the figure needs none: width:100%; height:auto is its natural ratio). `.jd-post-noimg` is a 3:2 deep-green plate with the house diamond, so a post without a photograph looks set, not broken. NOTHING INSIDE A PHOTOGRAPH MOVES ON HOVER. L6 THE WIDGET FIGHTS. style.css:1394/1406 make `h3.widget-title` a grid with ::before/::after rule lines; :1472 flags `.widget{margin !important}`; :1489 flags `.widget ul{padding !important}` plus a white box, a border and 95% width; :1498 prints a FA chevron in every li::before; :1517 sets 13px links; :1476/:1485/:1523 recolour hovered links (#4f6f52, #cbb279) at ≤ (0,3,2) — restated in the rest colour at (0,3,3) OUTSIDE (hover:hover), so a sticky touch hover never shows them. All answered under `.jd-blog-aside`; the two flags in kind; `content:none` on the pseudos. L7 THE EDITOR'S INLINE STYLES need `!important`: `[style*="font-family"] {font-family:inherit !important}`, `[style*="font-size"]`, `[style*= "font-weight: 400"]` (substring — ``/`` keep bolder), `[style*="color"]`, `[style*="line-height"]`, `[style*="background"]`, `[style*="text-align: justify"]`. Without them every paragraph prints in Arial, the intro at 16px, the bold spans at 400. L8 BULLETS. style.css:47 `li{list-style-type:none}` sitewide — restored as `.jd-article-body ul li{list-style-type:disc}` / `ol li{decimal}` with a brass-ink ::marker; the padding-left is on the list so wrapped lines hang. L9 THE COMMENT SUBMIT. style.css:423 `.submit{padding:12px 15px !important; border:1px solid #fff !important; color:#fff !important}` and :445 `.submit:hover{color:#fff !important}` — answered in kind at (0,3,0) / (0,4,0). :2887 `.comment-form-* input{width:50%}` and responsive.css:687's 98% fall to `.jd-article .comment-form-author input` (0,2,1). L10 `.screen-reader-text` AND `.assistive-text` are DEFINED HERE (the visually-hidden recipe). Without them the pagination's h2 "Long Stay pages" prints at 36px in #4f6f52 and comments.php's "Comment navigation" at 38px in brass. L11 style.css:65 `:focus{outline:0; box-shadow:none}` kills focus sitewide. Every link, cell, field and button here has a `:focus- visible` rule at ≥ (0,2,0). Rings are 2px brass ink #6b5426 offset 2–3px (6.71 paper / 6.95 plate); on the green pills #24331f outside the fill; on the band #e6d4a6 (7.73). L12 THE MEASURE IS `ch` ON THE ARTICLE'S OWN FONT. `.jd-article-inner` sets 18px Karla, so `max-width:66ch` on the body, the figure, the meta, the foot, the nav and (via calc(66ch * 1.125) on the 16px comments) the form resolves to the same ≈ 705px (Karla's "0" is .594em). Never `.container`. L13 `:has()` only inside `@supports selector(:has(*))`. Every media query is min-width. Hover only inside `@media (hover:hover)`. L14 NO ENGLISH IN `content`: the jump numerals are a CSS counter; the separators and arrows are SVG data URIs. ========================================================================== CONTRAST — sRGB, at the worst composited pixel where the ground carries grain (paper .04 → worst #f0ede5; the band's grain and sheen compound to a lightest pixel of #3b4f40 — sampled, not modelled) ========================================================================== PAPER #faf7ef flat / worst pixel #2b3f2f h1, titles, section heads, index links .. 10.58 / 9.68 PASS 4.5 #3a4238 excerpts, intros, the article body ...... 9.73 / 8.90 PASS 4.5 #6b5426 eyebrows, deck, category links, Read the story, index titles, body links, ::marker, the article date, focus rings ........... 6.71 / 6.14 PASS 4.5 #5b6357 dates, section intros, meta, counts ..... 5.83 / 5.33 PASS 4.5 rgba(107,84,38,.72) = #93825e cell, field, nav, mat and postcard edges .................. 3.51 / 3.21 PASS 3.0 non-text #e6e0d1 the well behind a loading photograph .... 1.23 decorative rgba(107,84,38,.32) row hairlines, meta rules .... 1.64 decorative #2b3f2f the current cell, the pills, as areas ... 10.58 PASS 3.0 PLATE #fdfbf6, flat (postcards, cells, nav cells, the figure's mat) #2b3f2f 10.95 · #3a4238 10.07 · #6b5426 6.95 · #5b6357 6.03 PASS 4.5 #a58c55 the postcards' inner rules, the mat's caption rule ............................ 3.13 PASS 3.0 non-text wash #f4eee0 (hover): #2b3f2f 9.79 · #6b5426 6.21 PASS GREEN band #2b3f2f + grain + sheen, worst pixel #3b4f40 (measured) #f6edd8 Staycation title, empty note ............ 9.72 / 7.58 PASS 4.5 #d9d2bd Staycation intro ......................... 7.50 / 5.85 PASS 4.5 #cbb279 the double rule, postcard edges ......... 5.49 / 4.28 PASS 3.0 non-text #fdfbf6 the postcards as areas ................... 10.95 / 8.54 PASS 3.0 #e6d4a6 focus rings on the band .................. 7.73 / 6.03 PASS 3.0 GREEN #2b3f2f / #2f4634 (current cell, pills, no-photo plate) #f6edd8 numeral, pill labels ..................... 9.72 / 8.81 PASS 4.5 #cbb279 the diamond on the no-photo plate ....... 5.49 / 4.89 PASS 3.0 ========================================================================== */ /* ========================================================================== §1 TOKENS — on the two page wrappers, so nothing leaks (L1) ========================================================================== */ .jd-blog, .jd-article{ --jb-serif:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; --jb-sans:"Karla","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; --jb-paper:#faf7ef; --jb-plate:#fdfbf6; --jb-wash:#f4eee0; --jb-green:#2b3f2f; --jb-pill:#2f4634; --jb-pill-deep:#24331f; --jb-ink:#2b3f2f; --jb-body:#3a4238; --jb-brass-ink:#6b5426; --jb-quiet:#5b6357; --jb-cream-ink:#f6edd8; --jb-cream-quiet:#d9d2bd; --jb-brass:#cbb279; --jb-ring-band:#e6d4a6; --jb-rule:#a58c55; /* 3.13 on the plate — inner rules of plate objects only */ --jb-edge:rgba(107,84,38,.72); /* 3.51 paper / 3.34 worst / 3.58 plate */ --jb-hair:rgba(107,84,38,.32); /* decorative row hairlines */ --jb-hair-brass:rgba(203,178,121,.55); /* the band's seams */ --jb-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"); --jb-grain-night:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); --jb-sheen:linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.14) 100%); --jb-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' viewBox='0 0 18 10'%3E%3Cpath fill='none' stroke='%236b5426' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 5h15M12 1l4 4-4 4'/%3E%3C/svg%3E"); --jb-arrow-back:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' viewBox='0 0 18 10'%3E%3Cpath fill='none' stroke='%236b5426' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M17 5H2M6 1L2 5l4 4'/%3E%3C/svg%3E"); --jb-arrow-cream:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' viewBox='0 0 18 10'%3E%3Cpath fill='none' stroke='%23f6edd8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M17 5H2M6 1L2 5l4 4'/%3E%3C/svg%3E"); --jb-dia:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 7 7'%3E%3Cpath d='M3.5 0L7 3.5 3.5 7 0 3.5z' fill='%236b5426'/%3E%3C/svg%3E"); --jb-dia-brass:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cpath d='M17 1L33 17 17 33 1 17z' fill='none' stroke='%23cbb279' stroke-width='1.4'/%3E%3Cpath d='M17 9l8 8-8 8-8-8z' fill='%23cbb279'/%3E%3C/svg%3E"); --jb-shadow:0 30px 40px -34px rgba(43,63,47,.45); /* a plate object on the paper */ --jb-well:#e6e0d1; /* behind a photograph while it loads — putty, never the no-photo green */ --jb-ease:cubic-bezier(.2,.7,.2,1); --jb-t:.24s; } /* ========================================================================== §2 THE GROUNDS — grained paper; the wrapper is a size container (L2, L4) ========================================================================== */ .jd-blog{ position:relative; padding:0 0 76px; /* L2 — the masthead's air is on .jd-blog-head */ background-color:var(--jb-paper); background-image:var(--jb-grain); color:var(--jb-body); container-type:inline-size; /* 100cqw = the body's width, scrollbar excluded */ } .jd-article{ position:relative; padding:0 0 76px; /* L2 — the head's air is on .jd-article-head */ background-color:var(--jb-paper); background-image:var(--jb-grain); color:var(--jb-body); } @supports not (width:1cqw){ .jd-blog{ overflow-x:hidden; } /* only where the 50vw fallback band needs it */ } /* ========================================================================== §3 THE MASTHEAD — .jd-blog-head on the landing and the archive ========================================================================== */ .jd-blog .jd-blog-head{ margin:0 0 44px; padding:26px 0 0; text-align:center; } .jd-blog .jd-blog-eyebrow{ margin:0 0 12px; font-family:var(--jb-sans); font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; line-height:1.4; color:var(--jb-brass-ink); /* 6.71 / 6.14 */ } .jd-blog .jd-blog-eyebrow a{ display:inline-flex; align-items:center; gap:9px; min-height:44px; color:var(--jb-brass-ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:var(--jb-edge); transition:color var(--jb-t) var(--jb-ease), text-decoration-color var(--jb-t) var(--jb-ease); } .jd-blog .jd-blog-eyebrow a::before{ content:""; width:18px; height:10px; background:var(--jb-arrow-back) no-repeat center / 18px 10px; } .jd-blog .jd-blog-eyebrow a:focus-visible{ outline:2px solid var(--jb-brass-ink); outline-offset:3px; } .jd-blog .jd-blog-title{ margin:0 0 16px; font-family:var(--jb-serif); font-optical-sizing:auto; font-size:clamp(36px, 9vw, 54px); font-weight:600; line-height:1.08; letter-spacing:-.016em; color:var(--jb-ink); /* 10.58 — style.css:70's #cbb279 was 2.0 */ text-wrap:balance; } /* the deck — Fraunces italic in brass ink */ .jd-blog .jd-blog-intro{ max-width:60ch; margin:0 auto; font-family:var(--jb-serif); font-optical-sizing:auto; font-style:italic; font-size:clamp(17px, 2.2vw, 20px); font-weight:500; line-height:1.5; color:var(--jb-brass-ink); /* 6.71 */ text-wrap:pretty; } .jd-blog div.jd-blog-intro p{ margin:0 0 .6em; font:inherit; color:inherit; line-height:inherit; } .jd-blog div.jd-blog-intro p:last-child{ margin-bottom:0; } /* THE INDEX — two buttons. 2026-09-13: the client asked for the two entries as buttons with no numerals, so the ruled index with its 01/02 counters is gone. Solid house green, cream caps, 46px tall like the pagination; hover and press deepen to the recess and draw a brass hairline; the ring is the brass-ink ring the rest of the page uses. */ .jd-blog .jd-blog-jump{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 14px; max-width:640px; margin:28px auto 0; padding:0; border:0; } .jd-blog .jd-blog-jump a{ display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; min-width:150px; min-height:46px; padding:0 26px; background-color:var(--jb-green); border:1px solid var(--jb-green); border-radius:2px; font-family:var(--jb-sans); font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; line-height:1; color:var(--jb-cream-ink); /* 9.62 on the green */ text-decoration:none; -webkit-tap-highlight-color:transparent; transition:background-color var(--jb-t) var(--jb-ease), border-color var(--jb-t) var(--jb-ease); } .jd-blog .jd-blog-jump a::before{ content:none; } .jd-blog .jd-blog-jump a:active{ background-color:#22331f; border-color:var(--jb-brass); color:var(--jb-cream-ink); } .jd-blog .jd-blog-jump a:focus-visible{ outline:2px solid var(--jb-brass-ink); outline-offset:3px; } /* the archive's masthead closes on a rule (no jump index) */ .jd-blog.jd-archive .jd-blog-head{ padding-bottom:26px; border-bottom:2px solid var(--jb-brass-ink); } .jd-blog.jd-archive .jd-blog-title{ font-size:clamp(32px, 7.4vw, 50px); } /* ========================================================================== §4 SECTION HEADS ========================================================================== */ .jd-blog .jd-blog-section-head, .jd-article .jd-blog-section-head{ display:flex; flex-direction:column; gap:6px; margin:0 0 24px; padding:0; } .jd-blog .jd-blog-section-title, .jd-article .jd-blog-section-title{ margin:0; font-family:var(--jb-serif); font-optical-sizing:auto; font-size:clamp(28px, 3.4vw, 38px); font-weight:600; line-height:1.14; letter-spacing:-.012em; color:var(--jb-ink); /* 10.58 / 9.68 */ } .jd-blog .jd-blog-section-intro{ margin:0; font-family:var(--jb-sans); font-size:16px; line-height:1.55; color:var(--jb-quiet); /* 5.83 / 5.33 */ } .jd-blog .jd-blog-section{ position:relative; margin:0; padding:0; } .jd-blog .jd-blog-section + .jd-blog-section{ margin-top:64px; } .jd-blog .jd-blog-empty{ margin:0; padding:34px 0; border-top:1px solid var(--jb-hair); font-family:var(--jb-serif); font-style:italic; font-size:18px; line-height:1.5; color:var(--jb-quiet); text-align:center; } .jd-blog .jd-blog-empty a{ color:var(--jb-brass-ink); text-decoration:underline; text-underline-offset:3px; } .jd-blog .jd-blog-empty a:focus-visible{ outline:2px solid var(--jb-brass-ink); outline-offset:2px; } /* ========================================================================== §5 THE CARD — one family; the ruled front-page card at rest ========================================================================== */ .jd-blog .jd-post, .jd-article .jd-post{ position:relative; display:flex; flex-direction:column; min-width:0; margin:0; padding:22px 0 0; border-top:1px solid var(--jb-hair); background:transparent; transition:transform var(--jb-t) var(--jb-ease), box-shadow var(--jb-t) var(--jb-ease); } .jd-blog .jd-post-media, .jd-article .jd-post-media{ display:block; position:relative; overflow:hidden; background-color:var(--jb-well); color:var(--jb-body); /* a photograph that fails to load shows its alt text: ink on the well (7.4), not the band's cream inherited inside a postcard (1.2) */ text-decoration:none; } .jd-blog .jd-post-img, .jd-article .jd-post-img{ display:block; width:100%; height:auto; aspect-ratio:3 / 2; /* L5 */ object-fit:cover; transform:none; /* nothing inside a photograph moves on hover (L5) */ } /* the no-photograph plate — green, grained, the house diamond (L5) */ .jd-blog .jd-post-noimg, .jd-article .jd-post-noimg{ display:block; width:100%; aspect-ratio:3 / 2; background-color:var(--jb-green); background-image:var(--jb-dia-brass), var(--jb-grain-night); background-repeat:no-repeat, repeat; background-position:center center, 0 0; background-size:34px 34px, 120px 120px; box-shadow:inset 0 0 0 1px var(--jb-hair-brass); } @supports not (aspect-ratio:3 / 2){ .jd-blog .jd-post-media, .jd-article .jd-post-media{ height:0; padding-top:66.667%; } .jd-blog .jd-post-img, .jd-article .jd-post-img, .jd-blog .jd-post-noimg, .jd-article .jd-post-noimg{ position:absolute; top:0; left:0; width:100%; height:100%; padding:0; } /* the plate fills the padded anchor instead of starting below its padding box (clipped) */ } .jd-blog .jd-post-body, .jd-article .jd-post-body{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; padding:16px 0 0; } /* META — the date quiet, the category links brass ink and underlined */ .jd-blog .jd-post-meta, .jd-article .jd-post-meta{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin:0 0 10px; font-family:var(--jb-sans); font-size:13.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; line-height:1.5; color:var(--jb-quiet); /* 5.83 paper / 6.03 plate */ font-variant-numeric:lining-nums tabular-nums; } .jd-blog .jd-post-cats, .jd-article .jd-post-cats{ min-width:0; } .jd-blog .jd-post-cats a, .jd-article .jd-post-cats a{ display:inline-block; padding:6px 0; /* 13.5 × 1.5 + 12 ≈ 32px; 14px apart in the row */ margin:-6px 0; font-size:inherit; font-weight:inherit; color:var(--jb-brass-ink); /* 6.71 / 6.95 */ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:var(--jb-edge); transition:color var(--jb-t) var(--jb-ease), text-decoration-color var(--jb-t) var(--jb-ease); } .jd-blog .jd-post-cats a:focus-visible, .jd-article .jd-post-cats a:focus-visible{ outline:2px solid var(--jb-brass-ink); outline-offset:2px; } /* THE TITLE IS THE LINK — style.css:86 h3{28px} undone */ .jd-blog .jd-post-title, .jd-article .jd-post-title{ margin:0 0 10px; font-family:var(--jb-serif); font-optical-sizing:auto; font-size:21px; font-weight:600; line-height:1.28; letter-spacing:-.008em; color:var(--jb-ink); /* 10.58 / 10.95 */ text-wrap:pretty; } .jd-blog .jd-post-title a, .jd-article .jd-post-title a{ display:inline; color:inherit; text-decoration:none; transition:color var(--jb-t) var(--jb-ease); } .jd-blog .jd-post-title a:focus-visible, .jd-article .jd-post-title a:focus-visible{ outline:2px solid var(--jb-brass-ink); outline-offset:3px; border-radius:1px; } /* the excerpt, clamped at four lines so a row of three keeps one rhythm */ .jd-blog .jd-post-excerpt, .jd-article .jd-post-excerpt{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; margin:0 0 8px; font-family:var(--jb-sans); font-size:15.5px; line-height:1.6; color:var(--jb-body); /* 9.73 / 10.07 */ } /* READ THE STORY — a brass-ink line with an arrow, 44px tall, at the foot */ .jd-blog .jd-post-more, .jd-article .jd-post-more{ display:inline-flex; align-items:center; align-self:flex-start; gap:10px; min-height:44px; margin-top:auto; padding:6px 0; font-family:var(--jb-sans); font-size:13.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; line-height:1; color:var(--jb-brass-ink); /* 6.71 / 6.95 */ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; text-decoration-color:var(--jb-edge); transition:color var(--jb-t) var(--jb-ease), text-decoration-color var(--jb-t) var(--jb-ease); } .jd-blog .jd-post-more::after, .jd-article .jd-post-more::after{ content:""; flex:none; width:18px; height:10px; background:var(--jb-arrow) no-repeat center / 18px 10px; transition:transform var(--jb-t) var(--jb-ease); } .jd-blog .jd-post-more:focus-visible, .jd-article .jd-post-more:focus-visible{ outline:2px solid var(--jb-brass-ink); outline-offset:2px; } /* ========================================================================== §6 THE GRIDS — 1 / 2 / 3 across; the lead; the closing cards (L3) ========================================================================== */ .jd-blog .jd-blog-grid, .jd-article .jd-blog-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:30px 32px; margin:0; padding:0; } /* related stories on a phone: compact horizontal briefs (~600px for three) */ .jd-article .jd-blog-grid--3{ gap:22px; } .jd-article .jd-blog-grid--3 > .jd-post{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); column-gap:16px; align-items:start; padding-top:20px; } .jd-article .jd-blog-grid--3 > .jd-post > .jd-post-body{ padding-top:0; } .jd-article .jd-blog-grid--3 > .jd-post .jd-post-excerpt{ display:none; } .jd-article .jd-blog-grid--3 > .jd-post .jd-post-title{ font-size:19px; margin-bottom:6px; overflow-wrap:anywhere; } /* 320 at 1.3x text scaling: "Companionship" could not break in the 168px column */ .jd-article .jd-blog-grid--3 > .jd-post .jd-post-meta{ margin-bottom:8px; } .jd-article .jd-blog-grid--3 > .jd-post .jd-post-title{ /* a 145-character title ran 8 lines beside a 134px photograph: four lines on the phone brief (three from 992, above) */ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; padding:5px; margin:-5px -5px 1px; } /* the lead on a phone: the title a size up */ .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:first-child .jd-post-title{ font-size:26px; line-height:1.2; } .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:first-child .jd-post-excerpt{ font-size:16.5px; } /* THE HORIZONTAL CARD — photograph left, words right: the lead at 768–991, the lone last card, the related stories at 768–991 */ @media (min-width:768px){ .jd-blog .jd-blog-grid, .jd-article .jd-blog-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:36px 32px; } .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:first-child, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(2n):last-child, .jd-blog .jd-blog-archive-list .jd-blog-grid > .jd-post:nth-child(odd):last-child, .jd-article .jd-blog-grid--3 > .jd-post{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto; column-gap:28px; align-items:start; } .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:first-child > .jd-post-body, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(2n):last-child > .jd-post-body, .jd-blog .jd-blog-archive-list .jd-blog-grid > .jd-post:nth-child(odd):last-child > .jd-post-body, .jd-article .jd-blog-grid--3 > .jd-post > .jd-post-body{ padding-top:0; } .jd-article .jd-blog-grid--3{ gap:36px 32px; } .jd-article .jd-blog-grid--3 > .jd-post{ grid-template-columns:minmax(0,2fr) minmax(0,3fr); padding-top:22px; } .jd-article .jd-blog-grid--3 > .jd-post .jd-post-excerpt{ display:-webkit-box; } .jd-article .jd-blog-grid--3 > .jd-post .jd-post-title{ font-size:21px; margin-bottom:10px; } .jd-article .jd-blog-grid--3 > .jd-post .jd-post-meta{ margin-bottom:10px; } .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:first-child .jd-post-title{ font-size:26px; line-height:1.18; } /* 28px ran a 95-character title to 5 lines in the 334px column */ .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:first-child .jd-post-excerpt{ font-size:16.5px; } /* the lead's photograph is 4:3 from here — the wider, deliberate crop (L5) */ .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:first-child .jd-post-img, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:first-child .jd-post-noimg{ aspect-ratio:4 / 3; } @supports not (aspect-ratio:4 / 3){ .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:first-child .jd-post-media{ padding-top:75%; } } } @media (min-width:992px){ /* six tracks, a card spans two: 3 across, and the closing cards can halve */ .jd-blog .jd-blog-grid{ grid-template-columns:repeat(6, minmax(0,1fr)); gap:36px 32px; } .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post, .jd-blog .jd-blog-archive-list .jd-blog-grid > .jd-post{ grid-column:span 2; } .jd-article .jd-blog-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:36px 32px; } /* the three related stories fill their row */ .jd-article .jd-blog-grid--3 > .jd-post{ grid-column:auto; display:flex; grid-template-columns:none; align-items:stretch; } .jd-article .jd-blog-grid--3 > .jd-post > .jd-post-body{ padding-top:16px; } .jd-article .jd-blog-grid--3 > .jd-post .jd-post-more{ margin-top:auto; } /* the 768 pair rules undone; the 992 closing rules take over */ .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(2n):last-child, .jd-blog .jd-blog-archive-list .jd-blog-grid > .jd-post:nth-child(odd):last-child{ grid-column:span 2; display:flex; grid-template-columns:none; align-items:stretch; } .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(2n):last-child > .jd-post-body, .jd-blog .jd-blog-archive-list .jd-blog-grid > .jd-post:nth-child(odd):last-child > .jd-post-body{ padding-top:16px; } /* THE CLOSING CARDS (L3): a lone last card spans the row; a last pair halves it — both as horizontal cards, photograph left, words right */ .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(3n+1):last-child:not(:first-child), .jd-blog .jd-blog-archive-list .jd-blog-grid > .jd-post:nth-child(3n+1):last-child, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(3n+1):nth-last-child(2):not(:first-child), .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(3n+2):last-child:not(:nth-child(2)), .jd-blog .jd-blog-archive-list .jd-blog-grid > .jd-post:nth-child(3n+1):nth-last-child(2), .jd-blog .jd-blog-archive-list .jd-blog-grid > .jd-post:nth-child(3n+2):last-child{ grid-column:span 3; display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); column-gap:28px; align-items:start; } .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(3n+1):last-child:not(:first-child), .jd-blog .jd-blog-archive-list .jd-blog-grid > .jd-post:nth-child(3n+1):last-child{ grid-column:1 / -1; column-gap:32px; } .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(3n+1):last-child:not(:first-child) > .jd-post-body, .jd-blog .jd-blog-archive-list .jd-blog-grid > .jd-post:nth-child(3n+1):last-child > .jd-post-body, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(3n+1):nth-last-child(2):not(:first-child) > .jd-post-body, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(3n+2):last-child:not(:nth-child(2)) > .jd-post-body, .jd-blog .jd-blog-archive-list .jd-blog-grid > .jd-post:nth-child(3n+1):nth-last-child(2) > .jd-post-body, .jd-blog .jd-blog-archive-list .jd-blog-grid > .jd-post:nth-child(3n+2):last-child > .jd-post-body{ padding-top:0; } /* THE LEAD — four tracks by two rows, a 4:3 photograph, a 34px title */ .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:first-child{ grid-column:1 / span 4; grid-row:1 / span 2; display:flex; grid-template-columns:none; align-items:stretch; /* the 768 horizontal card's start is undone */ } .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:first-child > .jd-post-body{ padding-top:24px; } .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:first-child .jd-post-meta{ font-size:14px; margin-bottom:12px; } .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:first-child .jd-post-title{ font-size:clamp(30px, 3.1vw, 40px); line-height:1.14; letter-spacing:-.014em; margin-bottom:14px; } .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:first-child .jd-post-excerpt{ font-size:17.5px; line-height:1.65; max-width:62ch; -webkit-line-clamp:5; } .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:first-child .jd-post-more{ margin-top:20px; } /* the site's real titles run to 145 characters (25 of the newest 100 are ≥95): on a 291–375px card that is 5–7 lines, and in the pair beside the lead it lifted the lead's Read link 146px off its foot. Three lines from 992 — the full title stays in the DOM, in the Read link's aria-label and on the single; the 5px padding / -5px margin keeps the focus ring (3px offset) inside the clip */ .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:not(:first-child) .jd-post-title, .jd-blog .jd-blog-grid--stay > .jd-post .jd-post-title, .jd-blog .jd-blog-archive-list .jd-blog-grid > .jd-post .jd-post-title, .jd-article .jd-blog-grid--3 > .jd-post .jd-post-title{ /* (0,4,0): outweighs the phone brief's 4-line clamp */ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; padding:5px; margin:-5px -5px 5px; } /* cards 2 and 3 beside it — the same card set tighter: the photograph on the wider 16:9 crop, the excerpt held to two lines, so the stacked pair finishes within ~80px of the lead's foot instead of ~190 */ .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(2) .jd-post-excerpt, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(3) .jd-post-excerpt{ -webkit-line-clamp:2; margin-bottom:6px; } .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(2) .jd-post-img, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(3) .jd-post-img, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(2) .jd-post-noimg, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(3) .jd-post-noimg{ aspect-ratio:16 / 9; } @supports not (aspect-ratio:16 / 9){ .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(2) .jd-post-media, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(3) .jd-post-media{ padding-top:56.25%; } } .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(2) > .jd-post-body, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(3) > .jd-post-body{ padding-top:14px; } .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(2) .jd-post-meta, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(3) .jd-post-meta, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(2) .jd-post-title, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(3) .jd-post-title{ margin-bottom:8px; } /* 992–1199 only: the 613px lead is shorter than its 291px pair, so the lead's photograph goes 5:4 and the pair sits tighter — the paper under the lead's Read link falls from ~130px to ~70px; 1200 restores 4:3 and the spacing */ .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:first-child .jd-post-img, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:first-child .jd-post-noimg{ aspect-ratio:5 / 4; } @supports not (aspect-ratio:5 / 4){ .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:first-child .jd-post-media{ padding-top:80%; } } .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(2), .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(3){ padding-top:18px; } .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(2) > .jd-post-body, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(3) > .jd-post-body{ padding-top:12px; } .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(2) .jd-post-meta, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(3) .jd-post-meta, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(2) .jd-post-title, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(3) .jd-post-title{ margin-bottom:6px; } .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(2) .jd-post-excerpt, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(3) .jd-post-excerpt{ margin-bottom:2px; } /* the lead's no-photograph plate is large here: the diamond a size up */ .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:first-child .jd-post-noimg{ background-size:48px 48px, 120px 120px; } /* a landing of one or two stories (L13) */ @supports selector(:has(*)){ .jd-blog .jd-blog-longstay .jd-blog-grid:has(> .jd-post:nth-child(2):last-child) > .jd-post{ grid-column:span 3; grid-row:auto; display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); column-gap:28px; align-items:start; } .jd-blog .jd-blog-longstay .jd-blog-grid:has(> .jd-post:only-child) > .jd-post{ grid-column:1 / -1; grid-row:auto; display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); column-gap:32px; align-items:start; } .jd-blog .jd-blog-longstay .jd-blog-grid:has(> .jd-post:nth-child(2):last-child) > .jd-post > .jd-post-body, .jd-blog .jd-blog-longstay .jd-blog-grid:has(> .jd-post:only-child) > .jd-post > .jd-post-body{ padding-top:0; } .jd-blog .jd-blog-longstay .jd-blog-grid:has(> .jd-post:nth-child(2):last-child) > .jd-post .jd-post-img, .jd-blog .jd-blog-longstay .jd-blog-grid:has(> .jd-post:nth-child(2):last-child) > .jd-post .jd-post-noimg, .jd-blog .jd-blog-longstay .jd-blog-grid:has(> .jd-post:only-child) > .jd-post .jd-post-img, .jd-blog .jd-blog-longstay .jd-blog-grid:has(> .jd-post:only-child) > .jd-post .jd-post-noimg{ aspect-ratio:3 / 2; } .jd-blog .jd-blog-longstay .jd-blog-grid:has(> .jd-post:nth-child(2):last-child) > .jd-post .jd-post-title, .jd-blog .jd-blog-longstay .jd-blog-grid:has(> .jd-post:only-child) > .jd-post .jd-post-title{ font-size:24px; line-height:1.2; } } } @media (min-width:1200px){ .jd-blog .jd-blog-grid, .jd-article .jd-blog-grid{ gap:40px 36px; } /* the 4:3 lead and the pair's spacing restored (the 992–1199 tuning undone) */ .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:first-child .jd-post-img, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:first-child .jd-post-noimg{ aspect-ratio:4 / 3; } @supports not (aspect-ratio:4 / 3){ .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:first-child .jd-post-media{ padding-top:75%; } } .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(2), .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(3){ padding-top:22px; } .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(2) > .jd-post-body, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(3) > .jd-post-body{ padding-top:14px; } .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(2) .jd-post-meta, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(3) .jd-post-meta, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(2) .jd-post-title, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(3) .jd-post-title{ margin-bottom:8px; } .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(2) .jd-post-excerpt, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post:nth-child(3) .jd-post-excerpt{ margin-bottom:6px; } } /* ========================================================================== §7 STAYCATION — the second room: the house's green band bled to the viewport (home-lux.css:2908), a double rule, half-page postcards (L4) ========================================================================== */ .jd-blog .jd-blog-staycation{ isolation:isolate; margin-top:64px; padding:44px 0 56px; color:var(--jb-cream-ink); } .jd-blog .jd-blog-staycation::before{ content:""; position:absolute; z-index:-1; top:0; bottom:0; left:calc(50% - 50cqw); right:calc(50% - 50cqw); background-color:var(--jb-green); background-image:var(--jb-grain-night), var(--jb-sheen); border-top:1px solid var(--jb-hair-brass); border-bottom:1px solid var(--jb-hair-brass); pointer-events:none; } @supports not (width:1cqw){ .jd-blog .jd-blog-staycation::before{ left:calc(50% - 50vw); right:calc(50% - 50vw); } } /* the heavier head rule: 3px over 1px, in brass on the green */ .jd-blog .jd-blog-staycation .jd-blog-section-head{ position:relative; padding-top:16px; border-top:3px solid var(--jb-brass); /* 5.49 / 4.70 as a boundary */ } .jd-blog .jd-blog-staycation .jd-blog-section-head::after{ content:""; position:absolute; left:0; right:0; top:2px; border-top:1px solid var(--jb-brass); } .jd-blog .jd-blog-staycation .jd-blog-section-title{ color:var(--jb-cream-ink); } /* 9.72 / 8.31 */ .jd-blog .jd-blog-staycation .jd-blog-section-intro{ color:var(--jb-cream-quiet); } /* 7.50 / 6.41 */ .jd-blog .jd-blog-staycation .jd-blog-empty{ border-top-color:var(--jb-hair-brass); color:var(--jb-cream-ink); } .jd-blog .jd-blog-staycation .jd-blog-empty a{ color:var(--jb-cream-ink); } .jd-blog .jd-blog-staycation .jd-blog-empty a:focus-visible{ outline-color:var(--jb-ring-band); } /* 1-up, 2-up from 768, capped so two read as half pages; six fall 2|2|2 */ .jd-blog .jd-blog-staycation .jd-blog-grid--stay{ grid-template-columns:minmax(0,1fr); gap:26px 32px; max-width:1040px; margin:0 auto; } /* THE POSTCARD — flat plate on the green, a brass edge, a cast shadow */ .jd-blog .jd-blog-grid--stay > .jd-post{ padding:0; border:1px solid var(--jb-brass); /* 5.49 / 4.70 on the band */ background-color:var(--jb-plate); background-image:none; box-shadow:0 30px 40px -30px rgba(0,0,0,.6); } .jd-blog .jd-blog-grid--stay > .jd-post .jd-post-media{ border-bottom:1px solid var(--jb-rule); } .jd-blog .jd-blog-grid--stay > .jd-post > .jd-post-body{ padding:18px 22px 16px; } .jd-blog .jd-blog-grid--stay > .jd-post .jd-post-meta{ padding:9px 0; border-top:1px solid var(--jb-rule); /* 3.13 on the plate */ border-bottom:1px solid var(--jb-rule); margin-bottom:14px; } .jd-blog .jd-blog-grid--stay > .jd-post .jd-post-title{ font-size:22px; } @media (min-width:768px){ .jd-blog .jd-blog-staycation{ padding:52px 0 64px; } .jd-blog .jd-blog-staycation .jd-blog-grid--stay{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:30px 32px; } .jd-blog .jd-blog-grid--stay > .jd-post > .jd-post-body{ padding:20px 24px 18px; } } @media (min-width:1200px){ .jd-blog .jd-blog-staycation .jd-blog-grid--stay{ gap:36px 40px; } .jd-blog .jd-blog-staycation .jd-blog-section-head, .jd-blog .jd-blog-staycation .jd-blog-more-row, .jd-blog .jd-blog-staycation .jd-blog-empty{ max-width:1040px; margin-left:auto; margin-right:auto; } /* the head shares the postcards' 1040px column: the only head on the page that did not share its content's left edge */ .jd-blog .jd-blog-grid--stay > .jd-post .jd-post-title{ font-size:24px; } } /* "All staycation stories" (only past six) — a plate pill on the green */ .jd-blog .jd-blog-more-row{ margin:34px 0 0; text-align:center; } .jd-blog .jd-blog-more, .jd-article .jd-article-back{ display:inline-flex; align-items:center; justify-content:center; min-width:190px; min-height:50px; padding:13px 32px; border:0; border-radius:30px; font-family:var(--jb-sans); font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; line-height:1.2; color:var(--jb-cream-ink); /* 8.81 on the fill */ background-color:var(--jb-pill); background-image:linear-gradient(0deg, var(--jb-pill-deep), var(--jb-pill-deep)); background-size:100% 0; background-repeat:no-repeat; background-position:bottom; text-decoration:none; transition:background-size var(--jb-t) var(--jb-ease), background-color var(--jb-t) var(--jb-ease), color var(--jb-t) var(--jb-ease); } .jd-blog .jd-blog-more{ color:var(--jb-brass-ink); /* 6.95 on the plate */ background-color:var(--jb-plate); background-image:linear-gradient(0deg, var(--jb-wash), var(--jb-wash)); border:1px solid var(--jb-brass); } .jd-blog .jd-blog-more:focus-visible{ outline:2px solid var(--jb-ring-band); outline-offset:3px; } .jd-article .jd-article-back:focus-visible{ outline:2px solid var(--jb-pill-deep); outline-offset:3px; } /* ========================================================================== §8 PAGINATION — page cells on the paper; the current page in green (L10) ========================================================================== */ .jd-blog .screen-reader-text, .jd-article .screen-reader-text, .jd-article .assistive-text{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; clip-path:inset(50%); white-space:nowrap !important; border:0 !important; } .jd-blog .jd-blog-pagination{ margin:44px 0 0; padding:0; } .jd-blog .jd-blog-pagination .nav-links{ display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:8px; } .jd-blog .jd-blog-pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; min-width:46px; min-height:46px; margin:0; padding:0 14px; background-color:var(--jb-plate); border:1px solid var(--jb-edge); /* 3.51 / 3.34 on the paper */ border-radius:0; font-family:var(--jb-sans); font-size:16px; font-weight:600; letter-spacing:.04em; line-height:1; color:var(--jb-brass-ink); /* 6.95 */ font-variant-numeric:lining-nums tabular-nums; text-decoration:none; -webkit-tap-highlight-color:transparent; transition:background-color var(--jb-t) var(--jb-ease), color var(--jb-t) var(--jb-ease), border-color var(--jb-t) var(--jb-ease); } .jd-blog .jd-blog-pagination .page-numbers.prev, .jd-blog .jd-blog-pagination .page-numbers.next{ padding:0 18px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; } .jd-blog .jd-blog-pagination .page-numbers.dots{ min-width:28px; padding:0; border-color:transparent; background:transparent; color:var(--jb-quiet); } .jd-blog .jd-blog-pagination .page-numbers.current{ background-color:var(--jb-green); border-color:var(--jb-green); color:var(--jb-cream-ink); /* 9.72 */ cursor:default; } .jd-blog .jd-blog-pagination a.page-numbers:focus-visible{ outline:2px solid var(--jb-brass-ink); outline-offset:2px; } .jd-blog .jd-blog-pagination a.page-numbers:active{ background-color:var(--jb-green); border-color:var(--jb-green); color:var(--jb-cream-ink); } /* ========================================================================== §9 THE INDEX — the widget area as three ruled rows, tracked-capital titles, lists in columns (L6) ========================================================================== */ .jd-blog .jd-blog-aside{ margin:72px 0 0; padding:0; border-top:2px solid var(--jb-brass-ink); } .jd-blog-aside .widget-area{ margin:0; padding:0; } .jd-blog-aside .widget{ margin:0 !important; /* style.css:1472, responsive:401 */ padding:20px 0 18px; border-bottom:1px solid var(--jb-hair); background:transparent; } .jd-blog-aside h3.widget-title{ display:block; grid-template-columns:none; margin:0 0 4px; padding:0; border:0; border-radius:0; background:transparent; font-family:var(--jb-sans); font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; line-height:1.5; color:var(--jb-brass-ink); /* 6.71 */ } .jd-blog-aside h3.widget-title::before, .jd-blog-aside h3.widget-title::after{ content:none; } .jd-blog-aside .widget ul{ display:block; width:auto; margin:0; padding:0 !important; /* style.css:1489 */ border:0; background:transparent; list-style:none; } .jd-blog-aside .widget ul li{ margin:0; padding:9px 0; /* with the link's 5px: 28px inline hit boxes 12px clear of each other (was 32px boxes 4px apart) */ list-style:none; break-inside:avoid; -webkit-column-break-inside:avoid; font-family:var(--jb-sans); font-size:14px; line-height:1.4; color:var(--jb-quiet); /* the counts, 5.83 */ font-variant-numeric:lining-nums tabular-nums; } .jd-blog-aside .widget ul li::before{ content:none; } .jd-blog-aside .widget ul li a i{ display:none; } /* phones: the two long lists in two columns, 36px rows; from 768 every link is a 44px target with 1.7px clear of the next */ .jd-blog-aside .widget_categories ul, .jd-blog-aside .widget_archive ul{ -webkit-columns:2; columns:2; -webkit-column-gap:24px; column-gap:24px; } /* the link is INLINE so the count follows the last word when a name wraps; its vertical padding is hit-testable without moving the line */ .jd-blog-aside .widget ul li a{ display:inline; padding:5px 0; font-family:var(--jb-sans); font-size:15.5px; font-weight:500; line-height:1.4; color:var(--jb-ink); /* 10.58 */ text-decoration:none; text-wrap:pretty; transition:color var(--jb-t) var(--jb-ease); } /* recent stories read as titles */ .jd-blog-aside .widget_recent_entries ul li a{ font-family:var(--jb-serif); font-optical-sizing:auto; font-size:17px; font-weight:500; line-height:1.35; } .jd-blog-aside .widget ul li a:focus-visible{ outline:2px solid var(--jb-brass-ink); outline-offset:2px; border-radius:1px; } /* style.css:1476/:1485/:1523's hover colours restated at rest (touch) */ .jd-blog-aside .widget ul li:hover a, .jd-blog-aside .widget ul li a:hover{ color:var(--jb-ink); text-decoration:none; } @media (min-width:768px){ .jd-blog .jd-blog-aside{ margin-top:80px; } .jd-blog-aside .widget{ display:grid; grid-template-columns:150px minmax(0,1fr); column-gap:28px; padding:22px 0 20px; } .jd-blog-aside h3.widget-title{ margin:0; padding-top:12px; } .jd-blog-aside .widget ul{ -webkit-columns:2; columns:2; -webkit-column-gap:32px; column-gap:32px; -webkit-column-rule:1px solid var(--jb-hair); column-rule:1px solid var(--jb-hair); } .jd-blog-aside .widget ul li{ padding:12px 0; } /* rows 46.4px apart */ .jd-blog-aside .widget ul li a{ padding:13px 0; font-size:16px; } /* inline box: 18.7 glyph + 26 = 44.7; 1.7px clear of the next */ .jd-blog-aside .widget_recent_entries ul li a{ font-size:17px; padding:12px 0; } } @media (min-width:992px){ .jd-blog-aside .widget{ grid-template-columns:190px minmax(0,1fr); column-gap:36px; } .jd-blog-aside .widget ul{ -webkit-columns:3; columns:3; } } @media (min-width:1200px){ .jd-blog-aside .widget ul{ -webkit-column-gap:40px; column-gap:40px; } .jd-blog-aside .widget_categories ul, .jd-blog-aside .widget_archive ul{ -webkit-columns:4; columns:4; } } /* ========================================================================== §10 THE SINGLE — a magazine article (L7, L8, L9, L12) ========================================================================== */ .jd-article .jd-article-inner{ font-family:var(--jb-sans); font-size:18px; /* the ch unit's font (L12) */ line-height:1.65; } /* THE HEAD — centred over the measure */ .jd-article .jd-article-head{ max-width:800px; margin:0 auto 32px; padding:32px 0 0; text-align:center; } .jd-article .jd-article-eyebrow{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0 12px; margin:0 0 14px; font-family:var(--jb-sans); font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; line-height:1.4; color:var(--jb-brass-ink); } .jd-article .jd-article-eyebrow a{ display:inline-flex; align-items:center; min-height:44px; color:var(--jb-brass-ink); /* 6.71 */ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:var(--jb-edge); transition:color var(--jb-t) var(--jb-ease), text-decoration-color var(--jb-t) var(--jb-ease); } .jd-article .jd-article-eyebrow a:focus-visible{ outline:2px solid var(--jb-brass-ink); outline-offset:2px; } .jd-article .jd-article-cats{ display:inline; /* the_category(', ') prints bare ", " text nodes between the links — inline-flex made each comma its own box 6px off its word on 29 of the newest 100 posts */ } .jd-article .jd-article-cats::before{ content:""; display:inline-block; vertical-align:middle; width:7px; height:7px; margin-right:8px; background:var(--jb-dia) no-repeat center / 7px 7px; } .jd-article .jd-article-title{ margin:0 0 16px; font-family:var(--jb-serif); font-optical-sizing:auto; font-size:clamp(32px, 5vw, 44px); font-weight:600; line-height:1.14; letter-spacing:-.03em; color:var(--jb-ink); /* 10.58 — was #cbb279 at 2.0 */ text-wrap:balance; } /* on a phone the 32px title is tracked -.03em: an 83-character title holds four lines at 336px (measured; -.02em was still five) */ @media (min-width:576px){ .jd-article .jd-article-title{ letter-spacing:-.014em; } } /* the deck-style meta: on a phone a two-line grid (date / read · views) so a diamond is never orphaned at a wrapped line's head */ .jd-article .jd-article-meta{ display:grid; grid-template-columns:repeat(2, max-content); justify-content:center; align-items:center; gap:4px 0; max-width:66ch; /* the measure (L12): the p keeps the article's 18px Karla, so 66ch = the body's 705px; the Fraunces goes on its children */ margin:0 auto; padding:10px 0; border-top:1px solid var(--jb-hair); border-bottom:1px solid var(--jb-hair); font-family:inherit; font-size:inherit; line-height:1.5; color:var(--jb-quiet); /* 5.83 */ } .jd-article .jd-article-meta > *{ min-width:0; white-space:nowrap; font-family:var(--jb-serif); font-optical-sizing:auto; font-style:italic; font-size:17px; font-weight:500; line-height:1.5; font-variant-numeric:lining-nums; } .jd-article .jd-article-meta > .jd-article-date{ grid-column:1 / -1; justify-self:center; color:var(--jb-brass-ink); } /* 6.71 */ .jd-article .jd-article-meta > .jd-article-read{ grid-column:1; justify-self:end; } .jd-article .jd-article-meta > .jd-article-views{ grid-column:2; justify-self:start; } .jd-article .jd-article-meta > .jd-article-read:last-child{ justify-self:center; grid-column:1 / -1; } .jd-article .jd-article-meta > .jd-article-views::before{ content:""; display:inline-block; width:7px; height:7px; margin:0 12px; vertical-align:middle; background:var(--jb-dia) no-repeat center / 7px 7px; } @media (min-width:576px){ .jd-article .jd-article-meta{ display:flex; flex-wrap:wrap; justify-content:center; } .jd-article .jd-article-meta > * + *::before{ content:""; display:inline-block; width:7px; height:7px; margin:0 12px; vertical-align:middle; background:var(--jb-dia) no-repeat center / 7px 7px; } } /* THE FIGURE — a matted plate on the measure (photo-gallery-lux's mat), the house diamond on a rule beneath the photograph; the plate is flat */ .jd-article .jd-article-figure{ box-sizing:border-box; width:100%; max-width:66ch; margin:0 auto 34px; padding:10px 10px 12px; background-color:var(--jb-plate); background-image:none; border:1px solid var(--jb-edge); /* 3.51 on the paper */ box-shadow:var(--jb-shadow); } .jd-article .jd-article-img{ display:block; width:100%; height:auto; aspect-ratio:3 / 2; /* L5 — a 3:2 window; an odd old upload is covered, never stretched */ object-fit:cover; object-position:50% 40%; background-color:var(--jb-well); } .jd-article .jd-article-figure::after{ content:""; display:block; height:9px; margin:12px 0 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='9'%3E%3Crect width='17' height='9' fill='%23fdfbf6'/%3E%3Cpath d='M8.5 1.2L11.8 4.5 8.5 7.8 5.2 4.5z' fill='%236b5426'/%3E%3C/svg%3E"), linear-gradient(90deg, var(--jb-rule), var(--jb-rule)); background-repeat:no-repeat, no-repeat; background-position:center center, center center; background-size:17px 9px, 100% 1px; } .jd-article .jd-article-figure figcaption{ margin:10px 4px 0; font-family:var(--jb-serif); font-style:italic; font-size:15px; line-height:1.5; color:var(--jb-quiet); text-align:center; } @media (min-width:768px){ .jd-article .jd-article-figure{ margin-bottom:40px; padding:12px 12px 14px; } } @media (min-width:1200px){ .jd-article .jd-article-figure{ padding:14px 14px 16px; } } /* THE BODY — the measure */ .jd-article .jd-article-body{ max-width:66ch; margin:0 auto; font-family:var(--jb-sans); font-size:18px; line-height:1.65; color:var(--jb-body); /* 9.73 */ overflow-wrap:break-word; } /* L7 */ .jd-article .jd-article-body [style*="font-family"]{ font-family:inherit !important; } .jd-article .jd-article-body [style*="font-size"]{ font-size:inherit !important; } .jd-article .jd-article-body [style*="font-weight: 400"], .jd-article .jd-article-body [style*="font-weight:400"]{ font-weight:inherit !important; } .jd-article .jd-article-body [style*="color"]{ color:inherit !important; } .jd-article .jd-article-body [style*="line-height"]{ line-height:inherit !important; } .jd-article .jd-article-body [style*="background"]{ background:transparent !important; } .jd-article .jd-article-body [style*="text-align: justify"], .jd-article .jd-article-body [style*="text-align:justify"]{ text-align:left !important; } .jd-article .jd-article-body [style*="text-decoration"]{ text-decoration:none !important; } /* 408 inline underlines in 20 posts: the editor wraps links in an underlined span, which drew an ink underline under the anchor's brass one; the anchor's own underline still propagates */ .jd-article .jd-article-body div, .jd-article .jd-article-body figure, .jd-article .jd-article-body .wp-caption{ max-width:100% !important; box-sizing:border-box; } .jd-article .jd-article-body p{ margin:0 0 1.3em; font-family:inherit; font-size:inherit; line-height:inherit; color:inherit; } .jd-article .jd-article-body p:empty{ display:none; } /* the editor's blank paragraphs */ /* the standfirst — the first paragraph in Fraunces; no drop cap */ .jd-article .jd-article-body > p:first-child{ font-family:var(--jb-serif); font-optical-sizing:auto; font-size:19px; font-weight:500; line-height:1.5; color:var(--jb-ink); text-wrap:pretty; } /* the editor's intro: the bold falls to the standfirst's own weight; on a phone (twelve lines of it) the italic stands upright */ .jd-article .jd-article-body > p:first-child strong, .jd-article .jd-article-body > p:first-child b{ font-weight:500; color:inherit; } .jd-article .jd-article-body > p:first-child i, .jd-article .jd-article-body > p:first-child em{ font-style:normal; } @media (min-width:768px){ .jd-article .jd-article-body > p:first-child{ font-size:21px; } .jd-article .jd-article-body > p:first-child i, .jd-article .jd-article-body > p:first-child em{ font-style:italic; } } .jd-article .jd-article-body h1, .jd-article .jd-article-body h2, .jd-article .jd-article-body h3, .jd-article .jd-article-body h4, .jd-article .jd-article-body h5, .jd-article .jd-article-body h6{ margin:1.7em 0 .55em; font-family:var(--jb-serif); font-optical-sizing:auto; font-weight:600; line-height:1.22; letter-spacing:-.01em; color:var(--jb-ink); /* 10.58 — was #222 on green, 2.6 */ background:transparent; text-wrap:pretty; } .jd-article .jd-article-body h1, .jd-article .jd-article-body h2{ font-size:clamp(26px, 2.6vw, 30px); } .jd-article .jd-article-body h3{ font-size:clamp(22px, 2.2vw, 24px); } .jd-article .jd-article-body h4, .jd-article .jd-article-body h5, .jd-article .jd-article-body h6{ font-size:20px; } .jd-article .jd-article-body > h2:first-child, .jd-article .jd-article-body > h3:first-child{ margin-top:0; } .jd-article .jd-article-body h2 b, .jd-article .jd-article-body h2 strong, .jd-article .jd-article-body h3 b, .jd-article .jd-article-body h3 strong, .jd-article .jd-article-body h4 b, .jd-article .jd-article-body h4 strong{ font-weight:inherit; } .jd-article .jd-article-body h2 span, .jd-article .jd-article-body h3 span, .jd-article .jd-article-body h4 span{ font-size:inherit; color:inherit; } /* style.css:91 h3 span{15px #cbb279} */ .jd-article .jd-article-body strong, .jd-article .jd-article-body b{ font-weight:700; color:var(--jb-ink); } .jd-article .jd-article-body em, .jd-article .jd-article-body i{ font-style:italic; } /* L8 — bullets restored, marks in brass ink */ .jd-article .jd-article-body ul, .jd-article .jd-article-body ol{ margin:0 0 1.3em; padding-left:1.5em; } .jd-article .jd-article-body ul{ list-style:disc; } .jd-article .jd-article-body ol{ list-style:decimal; } .jd-article .jd-article-body ul > li{ list-style-type:disc; } .jd-article .jd-article-body ol > li{ list-style-type:decimal; } /* child combinators: a ul nested in an ol keeps its discs */ .jd-article .jd-article-body ul ul > li{ list-style-type:circle; } .jd-article .jd-article-body li{ margin:0 0 .5em; padding:0; font:inherit; line-height:inherit; color:inherit; } .jd-article .jd-article-body li::marker{ color:var(--jb-brass-ink); /* 6.71 */ font-variant-numeric:lining-nums tabular-nums; } .jd-article .jd-article-body li > ul, .jd-article .jd-article-body li > ol{ margin:.5em 0 0; } /* links — brass ink, underlined, wrapping anywhere (the Courtesy URL) */ .jd-article .jd-article-body a{ color:var(--jb-brass-ink); /* 6.71 */ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:var(--jb-edge); overflow-wrap:anywhere; word-break:break-word; transition:color var(--jb-t) var(--jb-ease), text-decoration-color var(--jb-t) var(--jb-ease); } .jd-article .jd-article-body a span{ color:inherit; } .jd-article .jd-article-body a.blc-broken-link{ text-decoration-style:dotted; } .jd-article .jd-article-body a:focus-visible{ outline:2px solid var(--jb-brass-ink); outline-offset:2px; border-radius:1px; } /* images — capped at the measure, centred; the emoji stay inline */ .jd-article .jd-article-body img:not(.emoji){ display:block; max-width:100%; /* the width attr stays: the 800×400 lays out 2:1 before it loads */ height:auto; margin:1.6em auto; } .jd-article .jd-article-body img.emoji{ display:inline; width:1em; height:1em; margin:0 .05em; vertical-align:-.1em; } .jd-article .jd-article-body p > img:only-child{ margin:.3em auto; } .jd-article .jd-article-body img.aligncenter{ margin-left:auto; margin-right:auto; } .jd-article .jd-article-body img.alignnone{ margin-left:0; } .jd-article .jd-article-body figure, .jd-article .jd-article-body .wp-caption{ width:auto !important; /* WP's inline width:810px released */ max-width:100%; margin:1.6em auto; padding:0; border:0; background:transparent; } .jd-article .jd-article-body figure img, .jd-article .jd-article-body .wp-caption img{ margin:0 auto; } .jd-article .jd-article-body figcaption, .jd-article .jd-article-body .wp-caption-text{ margin:10px 0 0; padding:0; font-family:var(--jb-serif); font-style:italic; font-size:15px; line-height:1.5; color:var(--jb-quiet); text-align:center; } @media (min-width:768px){ .jd-article .jd-article-body img.alignleft, .jd-article .jd-article-body .alignleft{ float:left; max-width:48%; margin:.3em 1.4em 1em 0; } .jd-article .jd-article-body img.alignright, .jd-article .jd-article-body .alignright{ float:right; max-width:48%; margin:.3em 0 1em 1.4em; } .jd-article .jd-article-body h2, .jd-article .jd-article-body h3{ clear:both; } } .jd-article .jd-article-body blockquote{ margin:1.6em 0; padding:.2em 0 .2em 1.2em; border-left:3px solid var(--jb-brass-ink); font-family:var(--jb-serif); font-optical-sizing:auto; font-style:italic; font-size:21px; line-height:1.5; color:var(--jb-ink); } .jd-article .jd-article-body blockquote p{ margin-bottom:.6em; } .jd-article .jd-article-body blockquote p:last-child{ margin-bottom:0; } /* three of twenty posts open with `

` instead of a first paragraph: the same weight as the standfirst, no gap under the figure */ .jd-article .jd-article-body > blockquote:first-child{ margin-top:0; } .jd-article .jd-article-body blockquote strong, .jd-article .jd-article-body blockquote b{ font-weight:500; } .jd-article .jd-article-body blockquote cite{ display:block; margin-top:.4em; font-family:var(--jb-sans); font-style:normal; font-size:15px; color:var(--jb-quiet); } .jd-article .jd-article-body hr{ margin:2em auto; width:120px; height:0; border:0; border-top:1px solid var(--jb-brass-ink); background:transparent; opacity:1; } .jd-article .jd-article-body pre{ max-width:100%; overflow-x:auto; padding:14px 16px; background:var(--jb-plate); border:1px solid var(--jb-edge); font-size:15px; line-height:1.5; } .jd-article .jd-article-body code{ font-size:.92em; } /* tables and iframes contained */ .jd-article .jd-article-body table{ display:block; width:100%; max-width:100% !important; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; /* the scroll-shadow cue: a soft edge on whichever side has more table */ background: linear-gradient(90deg, var(--jb-paper) 30%, rgba(250,247,239,0)) 0 0 / 40px 100% no-repeat local, linear-gradient(90deg, rgba(250,247,239,0), var(--jb-paper) 70%) 100% 0 / 40px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(43,63,47,.18), transparent) 0 0 / 14px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(43,63,47,.18), transparent) 100% 0 / 14px 100% no-repeat scroll; margin:0 0 1.5em; border-collapse:collapse; font-size:16px; line-height:1.5; } .jd-article .jd-article-body table th, .jd-article .jd-article-body table td{ padding:10px 14px; border:0; border-bottom:1px solid var(--jb-edge); text-align:left; vertical-align:top; white-space:normal; } .jd-article .jd-article-body table th{ font-family:var(--jb-sans); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--jb-brass-ink); border-bottom:2px solid var(--jb-brass-ink); } .jd-article .jd-article-body iframe, .jd-article .jd-article-body video, .jd-article .jd-article-body embed, .jd-article .jd-article-body object{ display:block; width:100%; max-width:100%; height:auto; aspect-ratio:16 / 9; margin:1.6em auto; border:0; background-color:var(--jb-well); } /* wp_link_pages */ .jd-article .jd-article-pages{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:1.5em 0 0; font-size:15px; color:var(--jb-quiet); } .jd-article .jd-article-pages a, .jd-article .jd-article-pages .post-page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 12px; border:1px solid var(--jb-edge); background:var(--jb-plate); color:var(--jb-brass-ink); text-decoration:none; font-variant-numeric:tabular-nums; } .jd-article .jd-article-pages a:focus-visible{ outline:2px solid var(--jb-brass-ink); outline-offset:2px; } .jd-article .jd-article-pages .post-page-numbers.current{ background:var(--jb-green); border-color:var(--jb-green); color:var(--jb-cream-ink); } /* THE FOOT — "Filed under", quiet; "All stories", the pill */ .jd-article .jd-article-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px; max-width:66ch; margin:40px auto 0; padding:22px 0 0; border-top:1px solid var(--jb-brass-ink); } .jd-article .jd-article-filed{ margin:0; font-family:var(--jb-sans); font-size:14.5px; line-height:1.6; color:var(--jb-quiet); /* 5.83 */ } .jd-article .jd-article-filed-label{ display:inline-block; margin-right:6px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--jb-quiet); } .jd-article .jd-article-filed a{ display:inline-block; padding:8px 0; margin:-8px 0; color:var(--jb-brass-ink); /* 6.71 */ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:var(--jb-edge); transition:color var(--jb-t) var(--jb-ease), text-decoration-color var(--jb-t) var(--jb-ease); } .jd-article .jd-article-filed a:focus-visible{ outline:2px solid var(--jb-brass-ink); outline-offset:2px; } .jd-article .jd-article-back-row{ margin:0; } .jd-article .jd-article-back{ min-width:0; padding-left:28px; padding-right:28px; } .jd-article .jd-article-back::before{ content:""; width:18px; height:10px; margin-right:10px; background:var(--jb-arrow-cream) no-repeat center / 18px 10px; } /* PREVIOUS / NEXT — two cells, stacked on phones */ .jd-article .jd-article-nav{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; max-width:66ch; margin:26px auto 0; padding:0; } .jd-article .jd-article-prev, .jd-article .jd-article-next{ min-width:0; } .jd-article .jd-article-nav a{ display:flex; flex-direction:column; gap:6px; height:100%; min-height:44px; padding:16px 20px 18px; border:1px solid var(--jb-edge); /* 3.51 */ background-color:var(--jb-plate); color:var(--jb-ink); text-decoration:none; transition:border-color var(--jb-t) var(--jb-ease), background-color var(--jb-t) var(--jb-ease); } .jd-article .jd-article-nav a:focus-visible{ outline:2px solid var(--jb-brass-ink); outline-offset:2px; } .jd-article .jd-article-nav-label{ display:inline-flex; align-items:center; gap:8px; font-family:var(--jb-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; line-height:1.4; color:var(--jb-brass-ink); /* 6.95 */ } .jd-article .jd-article-prev .jd-article-nav-label::before, .jd-article .jd-article-next .jd-article-nav-label::after{ content:""; width:18px; height:10px; background:var(--jb-arrow) no-repeat center / 18px 10px; } .jd-article .jd-article-prev .jd-article-nav-label::before{ background-image:var(--jb-arrow-back); } .jd-article .jd-article-nav-title{ display:block; font-family:var(--jb-serif); font-optical-sizing:auto; font-size:18px; font-weight:600; line-height:1.3; letter-spacing:-.005em; color:var(--jb-ink); /* 10.95 */ text-wrap:pretty; } @media (min-width:576px){ .jd-article .jd-article-nav{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; } .jd-article .jd-article-next{ grid-column:2; text-align:right; } .jd-article .jd-article-next a{ align-items:flex-end; } } /* RELATED — "More stories" under a rule, the same cards */ .jd-article .jd-related{ margin:64px 0 0; padding:32px 0 0; border-top:2px solid var(--jb-brass-ink); } @supports selector(:has(*)){ .jd-article .jd-article-inner:has(.jd-article-nav) + .jd-related{ margin-top:72px; } /* L13 */ } /* THE COMMENTS — Twenty Twelve's form on the measure (L9) */ .jd-article .comments-area{ max-width:calc(66ch * 1.125); /* 16px type here; the same 705px as the body's 66ch of 18px (L12) */ margin:60px auto 0; padding:30px 0 0; border-top:1px solid var(--jb-brass-ink); font-family:var(--jb-sans); font-size:16px; line-height:1.6; color:var(--jb-body); } .jd-article .comments-area .comments-title, .jd-article .comments-area .comment-reply-title{ margin:0 0 8px; font-family:var(--jb-serif); font-optical-sizing:auto; font-size:clamp(26px, 3vw, 30px); font-weight:600; line-height:1.2; letter-spacing:-.01em; color:var(--jb-ink); } .jd-article .comments-area .comments-title span{ font-size:inherit; color:inherit; font-style:italic; font-weight:500; } .jd-article .comments-area .comment-reply-title small{ display:inline-block; margin-left:12px; font-family:var(--jb-sans); font-size:14px; font-weight:500; letter-spacing:0; } .jd-article .comments-area .comment-reply-title small a{ display:inline-block; padding:6px 0; color:var(--jb-brass-ink); text-decoration:underline; text-underline-offset:3px; } .jd-article .comments-area .comment-reply-title small a:focus-visible{ outline:2px solid var(--jb-brass-ink); outline-offset:2px; } .jd-article .comments-area .comment-form > p.comment-notes, .jd-article .comments-area .comment-form > p.logged-in-as, .jd-article .comments-area .comment-notes, .jd-article .comments-area .logged-in-as{ /* > p.class outweighs `.comment-form > p` below */ margin:0 0 22px; font-family:var(--jb-sans); font-size:14.5px; line-height:1.6; color:var(--jb-quiet); /* 5.83 */ } .jd-article .comments-area .comment-notes a, .jd-article .comments-area .logged-in-as a{ color:var(--jb-brass-ink); text-decoration:underline; text-underline-offset:3px; } .jd-article .comments-area .required{ color:var(--jb-brass-ink); } .jd-article .comments-area .comment-form > p{ margin:0 0 18px; font-family:var(--jb-sans); font-size:16px; line-height:1.5; color:var(--jb-body); } /* labels above, in ink (style.css:310 label{color:#fff}) */ .jd-article .comments-area label{ display:block; margin:0 0 6px; font-family:var(--jb-sans); font-size:14px; font-weight:700; letter-spacing:.02em; line-height:1.4; color:var(--jb-ink); } .jd-article .comments-area input, .jd-article .comments-area textarea{ box-sizing:border-box; padding:11px 14px; border:1px solid var(--jb-edge); /* 3.51 on the paper outside */ border-radius:0; background-color:#fff; background-image:none; box-shadow:none; font-family:var(--jb-sans); font-size:16px; line-height:1.5; color:var(--jb-ink); transition:border-color var(--jb-t) var(--jb-ease); } .jd-article .comment-form-comment textarea, .jd-article .comment-form-author input, .jd-article .comment-form-email input, .jd-article .comment-form-url input{ display:block; width:100%; min-height:48px; } .jd-article .comment-form-comment textarea{ min-height:170px; resize:vertical; } .jd-article .comments-area input:focus, .jd-article .comments-area textarea:focus{ border-color:var(--jb-brass-ink); } .jd-article .comments-area input:focus-visible, .jd-article .comments-area textarea:focus-visible{ outline:2px solid var(--jb-brass-ink); outline-offset:2px; border-color:var(--jb-brass-ink); } /* Name and Email side by side from 576; everything else spans */ @media (min-width:576px){ .jd-article .comments-area .comment-form{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:16px; } .jd-article .comments-area .comment-form > *{ grid-column:1 / -1; min-width:0; } .jd-article .comments-area .comment-form > .comment-form-author{ grid-column:1; } .jd-article .comments-area .comment-form > .comment-form-email{ grid-column:2; } } .jd-article .comments-area .comment-form-cookies-consent{ display:flex; align-items:flex-start; gap:10px; margin:0 0 22px; } .jd-article .comments-area .comment-form-cookies-consent input[type="checkbox"]{ flex:none; width:20px; height:20px; min-height:0; margin:2px 0 0; padding:0; accent-color:var(--jb-green); } .jd-article .comments-area .comment-form-cookies-consent label{ margin:0; font-size:14.5px; font-weight:400; color:var(--jb-body); } .jd-article .comments-area .form-submit{ margin:0; } /* the house pill; style.css:423/:445 flags answered in kind (L9) */ .jd-article .comments-area .submit{ display:inline-flex; align-items:center; justify-content:center; min-width:190px; min-height:50px; margin:0; padding:13px 32px !important; border:0 !important; border-radius:30px; color:var(--jb-cream-ink) !important; /* 8.81 */ background-color:var(--jb-pill); background-image:linear-gradient(0deg, var(--jb-pill-deep), var(--jb-pill-deep)); background-size:100% 0; background-repeat:no-repeat; background-position:bottom; box-shadow:none; font-family:var(--jb-sans); font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; line-height:1.2; cursor:pointer; -webkit-appearance:none; appearance:none; transition:background-size var(--jb-t) var(--jb-ease); } .jd-article .comments-area .submit:focus{ background-color:var(--jb-pill); box-shadow:none; } .jd-article .comments-area .submit:focus-visible{ outline:2px solid var(--jb-pill-deep); outline-offset:3px; } /* the list, when there are comments (twentytwelve_comment) */ .jd-article .comments-area .commentlist{ margin:0 0 36px; padding:0; list-style:none; } .jd-article .comments-area .commentlist li{ margin:0; padding:0; list-style:none; } .jd-article .comments-area .commentlist .children{ margin:0 0 0 24px; padding:0; list-style:none; } .jd-article .comments-area .commentlist article.comment, .jd-article .comments-area .commentlist .comment-body, .jd-article .comments-area .commentlist .pingback > p{ /* functions.php twentytwelve_comment(): `li.comment > article.comment` — no element ever carries .comment-body */ position:relative; padding:20px 0 18px; border-top:1px solid var(--jb-hair); font-family:var(--jb-sans); } .jd-article .comments-area .comment-awaiting-moderation{ display:block; margin:0 0 .8em; font-family:var(--jb-sans); font-size:14.5px; font-style:italic; color:var(--jb-quiet); } .jd-article .comments-area .comment-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:0 0 10px; font-family:var(--jb-sans); font-size:14px; color:var(--jb-quiet); } .jd-article .comments-area .comment-meta .avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; } .jd-article .comments-area .comment-meta .fn, .jd-article .comments-area .comment-meta cite{ font-family:var(--jb-serif); font-style:normal; font-size:18px; font-weight:600; color:var(--jb-ink); } .jd-article .comments-area .comment-meta a{ color:var(--jb-brass-ink); text-decoration:none; } .jd-article .comments-area .comment-meta a:focus-visible{ outline:2px solid var(--jb-brass-ink); outline-offset:2px; } .jd-article .comments-area .comment-content p{ margin:0 0 .8em; font-family:var(--jb-sans); font-size:16px; line-height:1.6; color:var(--jb-body); } /* style.css:57 p{Helvetica} */ .jd-article .comments-area .comment-content a{ color:var(--jb-brass-ink); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; } .jd-article .comments-area .reply a, .jd-article .comments-area .comment-reply-link{ display:inline-flex; align-items:center; min-height:44px; font-family:var(--jb-sans); font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--jb-brass-ink); text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--jb-edge); } .jd-article .comments-area .comment-reply-link:focus-visible{ outline:2px solid var(--jb-brass-ink); outline-offset:2px; } .jd-article .comments-area .comment-awaiting-moderation{ font-style:italic; color:var(--jb-quiet); } /* comment pagination — comments.php:60 prints `nav#comment-nav-below.navigation` with an h1.assistive-text (hidden by L10) and .nav-previous / .nav-next */ .jd-article .comments-area .navigation, .jd-article .comments-area .comment-navigation{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; margin:0 0 24px; font-size:14.5px; } .jd-article .comments-area .navigation .nav-previous, .jd-article .comments-area .navigation .nav-next{ margin:0; } .jd-article .comments-area .navigation a, .jd-article .comments-area .comment-navigation a{ display:inline-flex; align-items:center; min-height:44px; color:var(--jb-brass-ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--jb-edge); } .jd-article .comments-area .navigation a:focus-visible, .jd-article .comments-area .comment-navigation a:focus-visible{ outline:2px solid var(--jb-brass-ink); outline-offset:2px; } .jd-article .comments-area .nocomments{ margin:0 0 24px; font-style:italic; color:var(--jb-quiet); } /* ========================================================================== §11 HOVER — real pointers only ========================================================================== */ @media (hover:hover){ .jd-blog .jd-post-title a:hover, .jd-article .jd-post-title a:hover{ color:var(--jb-brass-ink); } /* 6.71 / 6.95 */ .jd-blog .jd-post:hover .jd-post-more::after, .jd-article .jd-post:hover .jd-post-more::after{ transform:translateX(4px); } .jd-blog .jd-post-more:hover, .jd-article .jd-post-more:hover, .jd-blog .jd-post-cats a:hover, .jd-article .jd-post-cats a:hover{ color:var(--jb-brass-ink); text-decoration-color:var(--jb-brass-ink); } /* the postcards lift; the ruled cards do not */ .jd-blog .jd-blog-grid--stay > .jd-post:hover{ transform:translateY(-3px); box-shadow:0 36px 46px -30px rgba(0,0,0,.7); } .jd-blog .jd-blog-eyebrow a:hover, .jd-article .jd-article-eyebrow a:hover, .jd-article .jd-article-filed a:hover, .jd-article .comments-area .comment-reply-link:hover, .jd-article .comments-area .navigation a:hover, .jd-article .comments-area .comment-navigation a:hover{ color:var(--jb-ink); text-decoration-color:var(--jb-ink); } .jd-blog .jd-blog-jump a:hover{ background-color:#22331f; border-color:var(--jb-brass); color:var(--jb-cream-ink); } .jd-blog .jd-blog-pagination a.page-numbers:hover, .jd-article .jd-article-pages a:hover{ background-color:var(--jb-wash); border-color:var(--jb-brass-ink); color:var(--jb-ink); /* 9.79 on the wash */ } .jd-blog-aside .widget ul li a:hover{ color:var(--jb-brass-ink); text-decoration:underline; text-underline-offset:4px; } .jd-blog-aside .widget ul li:hover a{ color:var(--jb-brass-ink); } /* style.css:1485's #4f6f52 */ .jd-blog-aside .widget ul li:hover::before{ content:none; } .jd-blog .jd-blog-more:hover, .jd-article .jd-article-back:hover, .jd-article .comments-area .submit:hover{ background-size:100% 100%; background-color:var(--jb-pill); color:var(--jb-cream-ink) !important; /* style.css:445 */ } .jd-blog .jd-blog-more:hover{ background-color:var(--jb-plate); color:var(--jb-ink) !important; } .jd-article .jd-article-body a:hover{ color:var(--jb-ink); text-decoration-color:var(--jb-ink); } .jd-article .jd-article-nav a:hover{ border-color:var(--jb-brass-ink); background-color:var(--jb-wash); } .jd-article .jd-article-nav a:hover .jd-article-nav-title{ color:var(--jb-brass-ink); } } /* ========================================================================== §12 REDUCED MOTION · FORCED COLOURS · PRINT ========================================================================== */ @media (prefers-reduced-motion:reduce){ .jd-blog *, .jd-article *, .jd-blog *::before, .jd-article *::before, .jd-blog *::after, .jd-article *::after{ transition:none !important; animation:none !important; } } @media (hover:hover) and (prefers-reduced-motion:reduce){ .jd-blog .jd-blog-grid--stay > .jd-post:hover{ transform:none; } .jd-blog .jd-post:hover .jd-post-more::after, .jd-article .jd-post:hover .jd-post-more::after{ transform:none; } } @media (forced-colors:active){ .jd-blog .jd-blog-jump a{ background:ButtonFace; border:1px solid ButtonText; color:ButtonText; } .jd-blog .jd-post, .jd-article .jd-post{ border-top:1px solid CanvasText; } .jd-blog .jd-blog-grid--stay > .jd-post, .jd-article .jd-article-figure, .jd-article .jd-article-nav a, .jd-blog .jd-blog-pagination .page-numbers, .jd-article .jd-article-pages a, .jd-article .comments-area input, .jd-article .comments-area textarea{ border:1px solid CanvasText; box-shadow:none; } .jd-blog .jd-blog-pagination .page-numbers.current, .jd-blog .jd-blog-more, .jd-blog .jd-blog-more:hover, .jd-article .jd-article-back, .jd-article .jd-article-back:hover, .jd-article .comments-area .submit, .jd-article .comments-area .submit:hover, .jd-article .comments-area .submit:focus{ forced-color-adjust:none; background:Highlight !important; /* the author :focus / :hover fills ((0,4,0)) outranked a plain Highlight here: Tab-focusing the submit painted #2f4634 under a forced black HighlightText, 2.05:1 */ border:1px solid Highlight !important; color:HighlightText !important; } .jd-blog .jd-post-noimg, .jd-article .jd-post-noimg{ background:Canvas; border:1px solid CanvasText; } .jd-blog .jd-blog-staycation::before{ background:Canvas; border-top:1px solid CanvasText; border-bottom:1px solid CanvasText; } .jd-blog .jd-blog-staycation .jd-blog-section-head, .jd-blog .jd-blog-staycation .jd-blog-section-head::after, .jd-blog .jd-blog-aside, .jd-blog .jd-blog-jump, .jd-blog.jd-archive .jd-blog-head, .jd-article .jd-related, .jd-article .jd-article-foot, .jd-article .jd-article-meta, .jd-article .comments-area{ border-color:CanvasText; } .jd-article .jd-article-figure::after{ display:none; } .jd-blog .jd-post-more::after, .jd-article .jd-post-more::after, .jd-blog .jd-blog-eyebrow a::before, .jd-article .jd-article-back::before, .jd-article .jd-article-cats::before, .jd-article .jd-article-nav-label::before, .jd-article .jd-article-nav-label::after, .jd-article .jd-article-meta > * + *::before, .jd-article .jd-article-meta > .jd-article-views::before{ display:none; } /* the words carry; a brass SVG could vanish on a black canvas */ .jd-blog a:focus-visible, .jd-article a:focus-visible, .jd-article .comments-area input:focus-visible, .jd-article .comments-area textarea:focus-visible{ outline:2px solid Highlight; } } @media print{ .jd-blog, .jd-article{ padding:0; background:#fff; color:#000; overflow:visible; container-type:normal; } .jd-blog .jd-blog-staycation::before{ display:none; } .jd-blog .jd-blog-staycation{ color:#000; } .jd-blog .jd-blog-jump, .jd-blog .jd-blog-pagination, .jd-blog .jd-post-more, .jd-article .jd-post-more, .jd-blog .jd-blog-aside, .jd-blog .jd-blog-more-row, .jd-article .jd-article-nav, .jd-article .jd-related, .jd-article .jd-article-back-row, .jd-article .comments-area, .jd-article .jd-article-pages{ display:none !important; } .jd-blog .jd-blog-title, .jd-blog .jd-blog-section-title, .jd-blog .jd-blog-staycation .jd-blog-section-title, .jd-blog .jd-blog-staycation .jd-blog-section-intro, .jd-blog .jd-post-title, .jd-blog .jd-post-excerpt, .jd-blog .jd-post-meta, .jd-blog .jd-blog-intro, .jd-blog .jd-blog-section-intro, .jd-article .jd-article-title, .jd-article .jd-article-meta, .jd-article .jd-article-eyebrow, .jd-article .jd-article-eyebrow a, .jd-article .jd-article-body, .jd-article .jd-article-body p, .jd-article .jd-article-body > p:first-child, .jd-article .jd-article-body h2, .jd-article .jd-article-body h3, .jd-article .jd-article-body h4, .jd-article .jd-article-body li, .jd-article .jd-article-body li::marker, .jd-article .jd-article-body strong, .jd-article .jd-article-body blockquote, .jd-article .jd-article-filed, .jd-article .jd-article-filed a{ color:#000; } .jd-article .jd-article-body a{ color:#000; text-decoration:underline; text-decoration-color:#000; } .jd-article .jd-article-body a[href]::after{ content:none; } .jd-article .jd-article-inner{ font-size:12pt; line-height:1.5; } .jd-article .jd-article-body, .jd-article .jd-article-figure, .jd-article .jd-article-foot{ max-width:100%; } .jd-article .jd-article-head{ max-width:100%; text-align:left; } .jd-article .jd-article-eyebrow, .jd-article .jd-article-meta{ justify-content:flex-start; } .jd-article .jd-article-title{ font-size:26pt; } .jd-article .jd-article-figure{ background:none; border:0; box-shadow:none; padding:0; margin-bottom:18pt; } .jd-article .jd-article-figure::after{ display:none; } .jd-article .jd-article-meta{ border-color:#000; max-width:100%; } .jd-article .jd-article-img{ aspect-ratio:auto; max-height:60vh; width:auto; max-width:100%; } .jd-article .jd-article-body img, .jd-article .jd-article-body h2, .jd-article .jd-article-body h3, .jd-article .jd-article-body blockquote, .jd-blog .jd-post{ break-inside:avoid; page-break-inside:avoid; } .jd-article .jd-article-body iframe, .jd-article .jd-article-body video{ display:none; } .jd-article .jd-article-foot, .jd-blog .jd-blog-staycation .jd-blog-section-head{ border-top-color:#000; } .jd-blog .jd-blog-staycation .jd-blog-section-head::after{ border-top-color:#000; } .jd-blog .jd-post, .jd-blog .jd-blog-grid--stay > .jd-post{ border-color:#000; box-shadow:none; background:#fff; } .jd-blog .jd-blog-grid, .jd-article .jd-blog-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } .jd-blog .jd-blog-grid > *, .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post, .jd-blog .jd-blog-archive-list .jd-blog-grid > .jd-post{ grid-column:auto !important; /* the ≥992 lead (0,5,0) and closing rules (0,6,0)+ still match at a landscape print width and collapsed half the cards to 0px */ grid-row:auto !important; display:flex !important; grid-template-columns:none !important; } .jd-blog .jd-blog-longstay .jd-blog-grid > .jd-post .jd-post-img{ aspect-ratio:3 / 2 !important; } }