/* Theme Name: NK Sanatan Treasure Theme URI: https://nksevaksanatan.com/ Author: NK Sevak Sanatan Author URI: https://nksevaksanatan.com/ Description: A classic literary-archive theme for NK Sanatan (Naresh Kumar Sevak) of Udaipur City — warm parchment, editorial typography and restrained gold detailing. Publishes poems and prose as "Treasure Pieces" with separate English and Hindi indexes that scale to thousands of entries. Version: 1.0.0 Requires at least: 6.0 Tested up to: 7.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: nk-sanatan-treasure Tags: custom-menu, custom-logo, translation-ready, right-sidebar, two-columns, blog */ /* ===================================================================== NK SANATAN'S WRITING TREASURE Built to "Website Design & Development Specification" Reference canvas 1024 x 1536 | content width 974px | outer margin 25px NOTE ON HEIGHTS: the spec's section heights are measurements taken off a fixed 1024x1536 mockup canvas. They are implemented here as min-height so real content (a long poem, a 1,300-row index) grows instead of clipping. ===================================================================== */ /* ---------- 3. COLOR SYSTEM ---------- */ :root{ --navy:#0E222A; /* Main navy background */ --navy-deep:#081B23; /* Header / footer dark area */ --cream:#F8F3E8; /* Cream page background */ --cream-2:#F6EFE1; /* Secondary cream */ --gold:#C9A35D; /* Borders, lines, highlights */ --green:#104B39; /* English table header */ --maroon:#76212B; /* Hindi table / header labels */ --burgundy:#741D25; /* Main title */ --ink:#211C17; /* Body text */ --border-beige:#D8BF8B; /* Panel borders */ --note-bg:#FFF3D2; /* Note background */ /* ---------- 8. SPACING SYSTEM ---------- */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; /* ---------- 9. SHADOWS ---------- */ --shadow-soft:0 2px 8px rgba(69,45,20,.08); --shadow-portrait:0 3px 8px rgba(0,0,0,.22); /* ---------- 4. TYPOGRAPHY STACKS ---------- */ --font-display:"Cormorant Garamond", Georgia, serif; --font-body:Georgia, "Times New Roman", serif; --font-ui:Arial, Helvetica, sans-serif; --font-hi:"Noto Serif Devanagari", "Noto Sans Devanagari", serif; /* ---------- 1. CANVAS ---------- */ --page-width:1024px; --content-width:974px; --page-margin:25px; } *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;} body{ margin:0; background:var(--cream); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.4; } img{display:block;max-width:100%;height:auto;} a{color:inherit;} /* The page shell. Named .nk-page, not .page: WordPress adds a "page" class to on every WP Page, and this rule's overflow would then propagate from the body to the viewport and stop the document scrolling. */ .nk-page{ width:100%; max-width:var(--page-width); margin:0 auto; background:var(--cream); box-shadow:0 0 24px rgba(69,45,20,.14); overflow:hidden; } /* ---------- Accessibility helpers ---------- */ .screen-reader-text{ position:absolute !important; width:1px;height:1px; margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%); border:0;white-space:nowrap; } .skip-link{ position:absolute;left:-9999px;top:0;z-index:99; padding:var(--space-2) var(--space-4); background:var(--gold);color:#12333D; font-family:var(--font-ui);font-size:14px;font-weight:700; text-decoration:none; } .skip-link:focus{left:var(--space-3);top:var(--space-2);} :focus-visible{outline:2px solid var(--gold);outline-offset:2px;} /* ===================================================================== 5.1 TOP WELCOME STRIP — height 40px ===================================================================== */ .welcome-strip{ min-height:40px; margin:0; display:flex;align-items:center;justify-content:center; padding:10px 16px; background:var(--cream); font-family:var(--font-display); font-style:italic; font-weight:600; font-size:17px; /* spec 16–18px */ line-height:1.2; /* keeps the strip on its 40px height */ color:#3B3226; text-align:center; white-space:nowrap; overflow:hidden; } /* ===================================================================== 5.2 HERO / BANNER — height 180px, columns 180/470/145/220 ===================================================================== */ .hero{ position:relative; min-height:180px; display:grid; /* The spec's four fixed columns total 1015px inside a 1024px hero, which left a 9px dead strip on the right and made the whole row — the quill image most visibly — sit shifted to the left. The title column is flexible instead, so the row always fills the hero exactly and stays balanced at any page width. minmax(0,…) stops long words widening it. */ /* The artwork sits flush in the corner and is feathered into the banner by the mask below, so it reads as part of the banner rather than a pasted rectangle. Column 2 is flexible so the row always fills the hero exactly — the spec's four fixed columns came to 1015px in a 1024px hero, which left a dead strip on the right and pulled the whole row leftwards. */ grid-template-columns:200px minmax(0,1fr) 145px 220px; align-items:center; background: radial-gradient(ellipse 70% 90% at 50% 50%, rgba(28,72,84,.75) 0%, transparent 72%), linear-gradient(135deg,#081B23 0%, #12333D 48%, #081B23 100%); border-bottom:2px solid var(--gold); overflow:hidden; } .hero::after{ /* subtle vignette */ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0,0,0,.45) 100%); } .hero > *{position:relative;z-index:1;} .hero-art{height:180px;overflow:hidden;} /* Feather the right edge into the banner so the photograph blends in instead of ending on a hard vertical seam against the navy. */ .hero-art img{ width:200px;height:180px;object-fit:cover;object-position:35% 50%; -webkit-mask-image:linear-gradient(to right,#000 45%,rgba(0,0,0,.35) 80%,transparent 100%); mask-image:linear-gradient(to right,#000 45%,rgba(0,0,0,.35) 80%,transparent 100%); } .hero-title{text-align:center;padding:0 var(--space-2);} .hero-title h1,.hero-title .brand{margin:0;} .hero-title .l1{ display:block; font-family:var(--font-display); font-weight:700; font-size:50px; /* spec 48–54px */ line-height:1.02; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); text-shadow:0 2px 6px rgba(0,0,0,.55); } .hero-title .l2{ display:block; font-family:var(--font-display); font-weight:500; font-size:37px; /* spec 35–40px */ line-height:1.1; letter-spacing:2.5px; text-transform:uppercase; color:#F3EBD8; margin-top:2px; text-shadow:0 2px 6px rgba(0,0,0,.55); } .hero-title a{text-decoration:none;} .hero-subtitle{ margin:var(--space-2) 0 0; font-family:var(--font-display); font-style:italic; font-weight:600; font-size:21px; /* spec 20–23px */ line-height:1.28; color:#E4CE96; } .hero-portrait{ width:145px;height:160px; margin:0 auto; border:2px solid var(--gold); outline:1px solid rgba(255,255,255,.18); outline-offset:2px; overflow:hidden; box-shadow:var(--shadow-portrait); background:#0E222A; } .hero-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;} .hero-quote{ margin:0; /* Left padding keeps the verse off the portrait frame; the column width itself stays at the specified 220px. */ padding:var(--space-2) var(--space-5) var(--space-2) var(--space-5); font-family:var(--font-display); font-style:italic; font-size:18px; /* spec 17–20px */ line-height:1.5; color:#EDE5CF; } .hero-quote cite{ display:block;margin-top:var(--space-3); font-style:normal;font-weight:600;color:#F0E4C0; } /* ===================================================================== 5.3 NAVIGATION BAR — height 40px ===================================================================== */ .mainnav{ min-height:40px; background:var(--navy-deep); border-bottom:1px solid var(--gold); } .mainnav ul{ min-height:40px; margin:0;padding:0;list-style:none; display:flex;align-items:stretch; overflow-x:auto; scrollbar-width:thin; } .mainnav li{display:flex;} .mainnav a{ display:flex;align-items:center;gap:var(--space-1); min-height:40px; padding:12px 15px; font-family:var(--font-ui); font-size:13px; /* spec 12–14px */ line-height:1.2; /* 12px padding + 13px text = the 40px bar */ font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:#E7E0CD; text-decoration:none; white-space:nowrap; border-right:1px solid rgba(255,255,255,.07); transition:background .18s,color .18s; } .mainnav li:first-child a{border-left:1px solid rgba(255,255,255,.07);} .mainnav a:hover,.mainnav a:focus-visible{background:rgba(201,163,93,.14);color:#E9D49A;} .mainnav a[aria-current="page"], .mainnav .current-menu-item > a, .mainnav .current_page_item > a, .mainnav .current-menu-parent > a{color:var(--gold);background:rgba(255,255,255,.05);} .mainnav .ico{width:16px;height:16px;fill:currentColor;} /* ===================================================================== 5.4 MAIN CONTENT CONTAINER — width 974px ===================================================================== */ .main{ width:var(--content-width); max-width:calc(100% - (var(--page-margin) * 2)); margin:var(--space-3) auto var(--space-4); padding:var(--space-3) var(--space-5) var(--space-5); background:linear-gradient(180deg,#FBF7EE 0%, var(--cream-2) 100%); border:1px solid var(--border-beige); border-radius:15px; /* spec 14–16px */ box-shadow:var(--shadow-soft), inset 0 0 26px rgba(201,163,93,.10); } /* ---------- 5.5 MAIN LITERARY HEADING ---------- */ .page-title{text-align:center;padding-top:12px;} .page-title h1,.page-title h2{margin:0;} .page-title .eyebrow{ display:block; font-family:var(--font-display); font-weight:600; font-size:25px; /* spec 23–27px */ letter-spacing:1.6px; text-transform:uppercase; color:#1E3A40; } .page-title .author{ display:block; margin-top:6px; /* spec line gap 5–8px */ font-family:var(--font-display); font-weight:500; font-size:38px; /* spec 35–40px */ letter-spacing:1.4px; text-transform:uppercase; color:var(--burgundy); } .rule{ width:700px;max-width:100%; margin:var(--space-3) auto var(--space-5); display:flex;align-items:center;justify-content:center;gap:var(--space-3); } .rule::before,.rule::after{ content:"";flex:1;height:1px; background:linear-gradient(to right,transparent,var(--gold),transparent); } .rule svg{width:34px;height:34px;fill:var(--gold);} /* spec 30–40px ornament */ /* ===================================================================== 5.6 FROM THE HOST PANEL — 1.7fr 0.75fr 1fr ===================================================================== */ .host{ display:grid; grid-template-columns:1.7fr .75fr 1fr; gap:0; min-height:300px; padding:var(--space-5) var(--space-6); background:var(--cream-2); border:1px solid var(--gold); border-radius:12px; box-shadow:var(--shadow-soft); } .host-text{padding-right:var(--space-6);} .host-ribbon{ display:inline-flex;align-items:center;gap:var(--space-2); /* Spec size is 225 x 34. min-width keeps that as the floor while nowrap stops a longer custom heading from wrapping the ribbon to two lines. */ min-width:225px;width:-moz-fit-content;width:fit-content; min-height:34px; white-space:nowrap; padding:0 var(--space-3); margin:0 0 var(--space-4); background:linear-gradient(180deg,#8A2833 0%, var(--burgundy) 100%); color:#FFFFFF; border-radius:6px; box-shadow:var(--shadow-soft); font-family:var(--font-display); font-weight:700; font-size:20px; /* spec 19–21px */ letter-spacing:1.2px; text-transform:uppercase; } .host-ribbon svg{width:22px;height:22px;fill:var(--gold);flex:0 0 auto;} .host-text p{ margin:0 0 var(--space-3); font-size:16px; /* spec 15–17px */ line-height:1.5; } .host-sign{margin-top:var(--space-5);text-align:right;font-family:var(--font-display);} .host-sign .name{ display:block;font-style:italic;font-weight:700;font-size:18px; /* spec 16–18px */ } .host-sign .role{display:block;margin-top:var(--space-1);font-size:15px;line-height:1.35;} .host-mark{ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:var(--space-4); padding:0 var(--space-4); text-align:center; border-left:1px solid var(--gold); border-right:1px solid var(--gold); } .host-mark svg, .host-mark img{width:130px;height:130px;} /* spec ~130 x 130 */ .host-mark picture{display:block;line-height:0;} .host-mark img{object-fit:contain;} .host-mark .rhythm{ margin:0; font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:1.8px; line-height:1.6; text-transform:uppercase; color:#28434A; } .host-card{ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:var(--space-3); padding-left:var(--space-5); text-align:center; } .profile-frame{ /* gold / black double frame */ width:145px;height:180px; /* spec 145 x 180 */ margin:0; padding:4px; background:#0B0B0B; border:1px solid var(--gold); border-radius:10px; box-shadow:var(--shadow-portrait); } .profile-frame img{width:100%;height:100%;object-fit:cover;border-radius:7px;} .host-card p{margin:0;} .host-card .cap-a{font-size:15px;} .host-card .cap-b{ font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1.3; color:var(--burgundy); } .host-card .cap-c{font-size:14px;line-height:1.35;} /* ===================================================================== 5.7 TREASURE INDEX HEADER — height 60px, grid 1fr 1.2fr 1.5fr ===================================================================== */ .index-head{ display:grid; grid-template-columns:1fr 1.2fr 1.5fr; align-items:center; min-height:60px; margin-top:var(--space-6); padding:var(--space-2) var(--space-5); background:var(--cream-2); border:1px solid var(--border-beige); border-radius:8px; box-shadow:var(--shadow-soft); } .index-head .cell{padding:0 var(--space-4);margin:0;} .index-head .cell + .cell{border-left:1px solid var(--gold);} .index-head .cell:first-child{ display:flex;align-items:center;gap:var(--space-3);padding-left:0; } .index-head .chest{width:50px;height:38px;flex:0 0 auto;} /* drawn fallback icon */ /* Chest artwork: spec width kept at 50px, height follows the near-square art. */ .index-head .cell:first-child picture{display:block;line-height:0;flex:0 0 auto;} .index-head .cell:first-child img{width:50px;height:auto;flex:0 0 auto;} .index-head h2{ margin:0; font-family:var(--font-display); font-weight:700; font-size:29px; /* spec 27–31px */ letter-spacing:1.6px; text-transform:uppercase; color:#22383E; } .index-head .hint{ font-family:var(--font-display); font-style:italic;font-weight:600;font-size:18px; } .index-head .note-hi{ font-family:var(--font-hi); font-size:14px;line-height:1.5; padding-right:0; } .index-head .note-hi u{color:var(--burgundy);} /* ===================================================================== 5.8 ENGLISH & HINDI TABLES — outer width 950px ===================================================================== */ .treasure{ width:950px;max-width:100%; margin:var(--space-4) auto 0; border:1px solid var(--border-beige); border-radius:7px; /* spec 6–8px outer */ overflow:hidden; background:var(--cream); box-shadow:var(--shadow-soft); } .treasure > h3{ margin:0; min-height:33px; /* spec 31–35px */ display:flex;align-items:center;justify-content:center; padding:0 var(--space-3); font-family:var(--font-display); font-weight:600; font-size:21px; /* spec 20–23px */ letter-spacing:1.4px; text-transform:uppercase; color:#F5EEDC; text-align:center; } .treasure.en > h3{background:var(--green);} .treasure.hi > h3{background:var(--maroon);} .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;} .treasure table,.nk-index-table{width:100%;min-width:900px;border-collapse:collapse;table-layout:fixed;} /* 6. TABLE COLUMN PROPORTIONS */ col.c-sn{width:6%;} col.c-title{width:19%;} col.c-genre{width:22%;} col.c-field{width:17%;} col.c-date{width:19%;} col.c-search{width:17%;} /* When the search column is switched off, its 17% is given to Title. */ .no-search col.c-title{width:36%;} .treasure thead th{ min-height:45px;height:45px; /* spec ~45px */ padding:var(--space-2) var(--space-3); font-family:var(--font-body); font-size:14px; /* spec 13–15px */ font-weight:700; color:#F5EEDC; text-align:center; border-left:1px solid rgba(255,255,255,.14); line-height:1.2; } .treasure.en thead th{background:#14563F;} .treasure.hi thead th{background:#8A2833;} .treasure thead th small{display:block;font-weight:400;font-size:11px;} .treasure tbody td{ height:37px; /* spec 36–38px */ /* 4px vertical padding, so the two-line Date cell still fits the 37px row (spec 5.8: the 5-row English index measures 293px overall). */ padding:var(--space-1) var(--space-3); border:1px solid var(--border-beige); font-size:15px; /* spec 14–16px */ text-align:center; background:var(--cream); } .treasure tbody tr:nth-child(even) td{background:var(--cream-2);} /* These modifiers are scoped under .treasure tbody so they outrank the base cell rule above — a bare `td.t-title` loses to `.treasure tbody td`. */ .treasure tbody td.t-title{text-align:left;} td.t-title a{ color:var(--burgundy); font-weight:600; text-decoration:underline; text-underline-offset:3px; } td.t-title a:hover,td.t-title a:focus-visible{color:#9A2733;} .treasure.hi td.t-title,.treasure.hi td.t-field, .treasure.hi td.t-genre{font-family:var(--font-hi);font-size:14px;} /* The name NK Sanatan gives the genre, on its own line under the plain word so the Genre column stays scannable. Always Latin — the coinages are not Devanagari — so it opts out of the Hindi stack the row otherwise uses. */ .treasure td.t-genre .t-coinage, .treasure.hi td.t-genre .t-coinage{ display:block; font-family:var(--font-body); font-size:11px; line-height:1.25; letter-spacing:.02em; color:var(--maroon); } /* 12px / 1.2 keeps the two-line date inside the 37px row (spec 5.8: the 5-row English index measures 293px overall). */ .treasure tbody td.t-date{text-align:left;font-size:12px;line-height:1.2;} td.t-date b{font-weight:700;} .search-btn{ width:30px;height:30px; /* spec 28–32px circle */ display:inline-flex;align-items:center;justify-content:center; border:1px solid #8A6F35; border-radius:50%; background:#FAF4E4; transition:background .18s; } .search-btn svg{width:19px;height:19px;fill:none;stroke:#5E4A21;stroke-width:2;} .search-btn:hover,.search-btn:focus-visible{background:#EFE3C4;} .view-all{ margin:0; padding:var(--space-3); text-align:center; background:var(--cream-2); border-top:1px solid var(--border-beige); } .view-all a{ display:inline-flex;align-items:center;gap:var(--space-2); min-height:40px; /* touch target */ padding:var(--space-2) var(--space-6); border-radius:6px; /* spec 5–6px */ font-family:var(--font-body); font-weight:700;font-size:16px; color:#F5EEDC;text-decoration:none; box-shadow:var(--shadow-soft); } .view-all a svg{width:26px;height:26px;fill:currentColor;} .treasure.en .view-all a{background:var(--green);border:1px solid var(--gold);} .treasure.hi .view-all a{background:var(--maroon);border:1px solid var(--maroon);} .view-all a:hover,.view-all a:focus-visible{filter:brightness(1.12);} .nk-empty{ margin:0;padding:var(--space-5); text-align:center;font-style:italic;color:#5E4A21; } /* ===================================================================== 5.9 BOTTOM MANUSCRIPT NOTE — width 940px ===================================================================== */ .manuscript-note{ width:940px;max-width:100%; margin:var(--space-4) auto 0; display:grid; grid-template-columns:45px 1fr; /* spec 45px icon column */ gap:var(--space-4); align-items:start; padding:var(--space-4) var(--space-5); background:var(--note-bg); border:1px solid var(--gold); border-radius:8px; box-shadow:var(--shadow-soft); } .manuscript-note svg{width:36px;height:36px;} /* spec 30–38px */ .manuscript-note p{ margin:0; font-size:15px; /* spec 14–16px */ line-height:1.3; /* spec 1.25–1.35 */ } .manuscript-note .hl{color:var(--burgundy);font-weight:700;} /* ===================================================================== 5.10 FOOTER — height 88px, columns 40% / 28% / 32% ===================================================================== */ .site-footer{ min-height:88px; display:grid; grid-template-columns:40% 28% 32%; align-items:center; padding:var(--space-4) var(--space-6); background:var(--navy-deep); color:#DED7C1; } .site-footer .col{padding:0 var(--space-4);} .site-footer .col + .col{border-left:1px solid var(--gold);} .site-footer .col:first-child{padding-left:0;} .foot-legal{font-size:13px;line-height:1.6;} /* spec 12–14px */ .foot-legal b{color:#F0E6C8;} .foot-legal a{color:#E4CE96;} .foot-social{text-align:center;} .foot-social .label{ font-family:var(--font-ui); font-size:12px;font-weight:700;letter-spacing:1.2px; color:#F0E6C8;margin:0 0 var(--space-2); } .foot-social ul{margin:0;padding:0;list-style:none;display:flex;gap:var(--space-3);justify-content:center;} .foot-social a{ width:30px;height:30px; /* spec 28–34px */ border-radius:50%; display:flex;align-items:center;justify-content:center; box-shadow:0 2px 5px rgba(0,0,0,.4); transition:transform .15s; } .foot-social a:hover,.foot-social a:focus-visible{transform:scale(1.12);} .foot-social svg{width:17px;height:17px;fill:#fff;} .fb{background:#1877F2;} .tw{background:#1DA1F2;} .yt{background:#FF0000;} .wa{background:#25D366;} .li{background:#0A66C2;} .ig{background:radial-gradient(circle at 30% 110%,#FDF497 0%,#FD5949 45%,#D6249F 60%,#285AEB 90%);} .foot-quote{ display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3); text-align:right; font-family:var(--font-display); font-style:italic; font-size:17px; /* spec 16–18px */ line-height:1.4; color:#E9DFC0; } .foot-quote p{margin:0;} .foot-quote svg, .foot-quote img{width:70px;height:70px;flex:0 0 auto;} /* spec ~70 x 70 */ .foot-quote picture{display:block;line-height:0;flex:0 0 auto;} .foot-quote img{object-fit:contain;} /* ===================================================================== INNER PAGES — single piece, archive with filters, search, 404 Same palette, type scale and container as the front page. ===================================================================== */ .entry-head{text-align:center;margin-bottom:var(--space-4);} .entry-title{ margin:0; font-family:var(--font-display); font-weight:600; font-size:34px; line-height:1.2; color:var(--burgundy); } .entry-title.hi,.piece-body.hi,.nk-hi{font-family:var(--font-hi);} .entry-meta{ margin:var(--space-3) 0 0; display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4); justify-content:center; font-size:14px;color:#4A3F2E; } .entry-meta .m{ display:inline-flex;align-items:center;gap:var(--space-1); padding:var(--space-1) var(--space-3); background:var(--cream); border:1px solid var(--border-beige); border-radius:20px; } .entry-meta .m b{font-weight:700;color:#5E4A21;} .entry-meta a{color:var(--burgundy);} /* His own name for the genre, inline in the meta pill. */ .entry-meta .m-coinage{color:var(--maroon);font-size:13px;} /* Piece layout: writing on the left, image + author box on the right. */ .piece-layout{ display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:var(--space-5); align-items:start; max-width:1000px; margin:0 auto; } .piece-aside{ display:flex;flex-direction:column;gap:var(--space-4); position:sticky;top:var(--space-4); } .piece-figure, .piece-author{ margin:0; padding:var(--space-3); background:var(--cream); border:1px solid var(--border-beige); border-radius:10px; box-shadow:var(--shadow-soft); text-align:center; } .piece-figure img, .piece-author img{ display:block;width:100%;height:auto; border-radius:7px; } /* Empty state: the box stays, so a picture can be dropped in later. */ .piece-figure.is-empty .piece-figure-slot{ display:flex;align-items:center;justify-content:center; aspect-ratio:4 / 5; border:1px dashed var(--gold); border-radius:7px; background:rgba(201,163,93,.06); } .piece-figure.is-empty svg{width:34px;height:34px;fill:var(--gold);opacity:.55;} .piece-figure figcaption, .piece-author figcaption{ margin-top:var(--space-2); font-size:12px;letter-spacing:.04em;text-transform:uppercase; color:#5E4A21; } .piece-author .pa-name, .piece-author .pa-role{display:block;} .piece-author .pa-name{font-weight:700;color:var(--burgundy);text-transform:none;font-size:13px;} .piece-author .pa-role{font-size:11px;opacity:.8;text-transform:none;} .piece-body{ max-width:720px; margin:0 auto; padding:var(--space-5) var(--space-6); background:var(--cream); border:1px solid var(--border-beige); border-radius:10px; box-shadow:var(--shadow-soft); font-size:17px; line-height:1.85; /* verse needs air */ } .piece-body p{margin:0 0 var(--space-5);} .piece-body p:last-child{margin-bottom:0;} .piece-body.hi{font-size:18px;line-height:2;} .piece-nav{ display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:space-between; margin-top:var(--space-5); } .nk-btn{ display:inline-flex;align-items:center;gap:var(--space-2); min-height:40px; padding:var(--space-2) var(--space-5); background:var(--green); border:1px solid var(--gold); border-radius:6px; color:#F5EEDC; font-family:var(--font-body);font-weight:700;font-size:15px; text-decoration:none; box-shadow:var(--shadow-soft); } .nk-btn.maroon{background:var(--maroon);border-color:var(--maroon);} .nk-btn:hover,.nk-btn:focus-visible{filter:brightness(1.12);} .nk-btn svg{width:20px;height:20px;fill:currentColor;} /* ---------- Archive filter bar ---------- */ .nk-filters{ display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-3); margin:0 auto var(--space-4); padding:var(--space-4) var(--space-5); background:var(--cream-2); border:1px solid var(--border-beige); border-radius:8px; box-shadow:var(--shadow-soft); } .nk-filters .f{display:flex;flex-direction:column;gap:var(--space-1);} .nk-filters label{ font-family:var(--font-ui); font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase; color:#5E4A21; } .nk-filters select,.nk-filters input[type="search"]{ min-height:40px; padding:var(--space-2) var(--space-3); background:var(--cream); border:1px solid var(--border-beige); border-radius:5px; font-family:var(--font-body);font-size:15px;color:var(--ink); } .nk-filters input[type="search"]{min-width:200px;} .nk-filters .actions{display:flex;gap:var(--space-2);margin-left:auto;} .nk-filters button{ min-height:40px; padding:var(--space-2) var(--space-5); background:var(--green); border:1px solid var(--gold); border-radius:6px; color:#F5EEDC; font-family:var(--font-body);font-weight:700;font-size:15px; cursor:pointer; } .nk-filters button:hover,.nk-filters button:focus-visible{filter:brightness(1.12);} .nk-filters .reset{ display:inline-flex;align-items:center; min-height:40px;padding:var(--space-2) var(--space-4); color:var(--burgundy);font-size:14px; } .nk-count{ margin:0 0 var(--space-3); font-family:var(--font-display);font-style:italic;font-size:17px;color:#3B3226; text-align:center; } /* ---------- Pagination ---------- */ .nk-pagination{margin-top:var(--space-5);text-align:center;} /* * paginate_links( 'type' => 'list' ) returns a