/* ============================================================ JM Farm - shared stylesheet (all public pages) Palette: cream paper, soil ink, pasture green, barn red, wheat gold. System serif display, system sans body. No external fonts or assets. Works offline. ============================================================ */ :root{ --paper:#F7F3E8; --card:#FFFDF6; --panel:#EFE8D4; --line:#E2D9C4; --line2:#B9AC8C; --ink:#2E2418; --muted:#5C5140; --faint:#8A7C60; --green:#4A7042; --green-hover:#3D5C36; --green-dark:#2F4A2A; --green-tint:#E4EDDD; --red:#A5402D; --red-dark:#7A2E1E; --red-tint:#E9DDD6; --gold-tint:#F3E3C2; --gold-dark:#6B4E12; --photo:#C9BC9C; --photo-ink:#7A6C4E; --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif; --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --r-lg:10px; --r-md:9px; --r-sm:7px; --maxw:1060px; } /* ---- THEME SYSTEM ---------------------------------------------- Light (cream) is the default when a device states no preference. Dark applies two ways, and the variable blocks below MUST be kept identical (no CSS preprocessor, so they are written twice): 1) the device asks for dark AND the visitor has not chosen light 2) the visitor explicitly chose dark with the header toggle The toggle (site.js) sets data-theme="light|dark" on and stores the choice; with no stored choice, the device decides. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#211B12; --card:#2A2318; --panel:#2E2718; --line:#3E3524; --line2:#5C5140; --ink:#EFE8D8; --muted:#C4B89E; --faint:#95886C; --green:#6E9963; --green-hover:#7FAA74; --green-dark:#CFE3C6; --green-tint:#33402C; --red:#D0705B; --red-dark:#EDC0B4; --red-tint:#463027; --gold-tint:#453A1E; --gold-dark:#E3C87E; --photo:#4A4230; --photo-ink:#A79877; } /* Photos glare against the dark ground; take the edge off. */ /* Item-page galleries stay full brightness: that is where buyers inspect photos. Only the hero and grid cards get dimmed. */ :root:not([data-theme="light"]) .hero-photo img, :root:not([data-theme="light"]) .card-photo{filter:brightness(.82)} /* effective dark: toggle offers the sun (switch to light) */ :root:not([data-theme="light"]) .theme-toggle .moon{display:none} :root:not([data-theme="light"]) .theme-toggle .sun{display:block} } :root[data-theme="dark"]{ --paper:#211B12; --card:#2A2318; --panel:#2E2718; --line:#3E3524; --line2:#5C5140; --ink:#EFE8D8; --muted:#C4B89E; --faint:#95886C; --green:#6E9963; --green-hover:#7FAA74; --green-dark:#CFE3C6; --green-tint:#33402C; --red:#D0705B; --red-dark:#EDC0B4; --red-tint:#463027; --gold-tint:#453A1E; --gold-dark:#E3C87E; --photo:#4A4230; --photo-ink:#A79877; } :root[data-theme="dark"] .hero-photo img, :root[data-theme="dark"] .card-photo{filter:brightness(.82)} :root[data-theme="dark"] .theme-toggle .moon{display:none} :root[data-theme="dark"] .theme-toggle .sun{display:block} *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none !important;transition:none !important} } body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--sans);font-size:16px;line-height:1.65; -webkit-font-smoothing:antialiased; } img,svg{max-width:100%;height:auto} a{color:var(--green)} h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.2;margin:0 0 .5em} h1{font-size:clamp(28px,5vw,40px)} h2{font-size:clamp(21px,3.2vw,26px)} h3{font-size:18px} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px} .skip{position:absolute;left:-9999px;top:0;background:var(--green);color:#fff;padding:8px 14px;border-radius:0 0 var(--r-sm) 0;z-index:20} .skip:focus{left:0} /* ------- header / nav ------- */ .site-header{border-bottom:1px solid var(--line);background:var(--paper)} .site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:16px;padding-bottom:16px;flex-wrap:wrap} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)} .brand-logo{width:44px;height:44px;flex:none} .header-right{display:flex;align-items:center;gap:16px} .theme-toggle{background:none;border:1px solid var(--line);border-radius:50%;width:34px;height:34px;display:none;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);padding:0} .theme-toggle:hover{color:var(--ink);border-color:var(--line2)} .theme-toggle svg{width:17px;height:17px} .theme-toggle .sun{display:none} .theme-toggle.ready{display:flex} .brand-name{font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.1} .brand-loc{font-size:11px;letter-spacing:.08em;color:var(--faint)} .site-nav{display:flex;gap:22px;font-size:15px} .site-nav a{color:var(--muted);text-decoration:none;padding-bottom:2px} .site-nav a:hover{color:var(--ink)} .site-nav a[aria-current="page"]{color:var(--ink);border-bottom:2px solid var(--green)} /* ------- hero ------- */ .hero{display:grid;grid-template-columns:1.1fr 1fr;border-bottom:1px solid var(--line)} .hero-copy{padding:clamp(30px,6vw,56px) 20px clamp(30px,6vw,56px) max(20px,calc((100vw - var(--maxw)) / 2 + 20px));background:var(--panel);display:flex;flex-direction:column;justify-content:center} .eyebrow{font-size:12px;letter-spacing:.14em;color:var(--red);font-weight:600;margin:0 0 8px;text-transform:uppercase} .hero-copy h1{margin-bottom:14px} .hero-copy p{margin:0 0 22px;color:var(--muted);max-width:34em} .hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;display:block} .hero-photo{min-height:280px} /* ------- buttons ------- */ .btn{display:inline-block;font-size:15px;padding:11px 22px;border-radius:var(--r-sm);text-decoration:none;border:0;cursor:pointer;font-family:var(--sans)} .btn-solid{background:var(--green);color:#F7F3E8} .btn-solid:hover{background:var(--green-hover)} .btn-line{border:1px solid var(--line2);color:var(--ink);background:transparent;margin-left:10px} .btn-line:hover{border-color:var(--faint)} /* ------- sections ------- */ section{padding:30px 0} .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap} .sec-head h2{margin:0} .more-link{font-size:14px;text-decoration:none} /* ------- listing cards ------- */ .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column} .card:hover{border-color:var(--line2)} .card.sold{opacity:.55} .card-photo{aspect-ratio:4/3;background:var(--photo);display:block;width:100%;object-fit:cover} .card-body{padding:13px 15px} .card-title{margin:0;font-size:15.5px;font-weight:600;font-family:var(--sans)} .card-sub{margin:3px 0 6px;font-size:13px;color:var(--muted)} .card-price{margin:0;font-size:16px;color:var(--red);font-weight:600} .badge{display:inline-block;font-size:11.5px;padding:3px 10px;border-radius:12px;margin-bottom:8px;font-weight:500} .b-available{background:var(--green-tint);color:var(--green-dark)} .b-coming-soon{background:var(--line);color:var(--muted)} .b-pending{background:var(--gold-tint);color:var(--gold-dark)} .b-sold{background:var(--red-tint);color:var(--red-dark)} .b-few-left{background:var(--gold-tint);color:var(--gold-dark)} .b-sold-out{background:var(--line);color:var(--muted)} .b-deposits{background:var(--green);color:var(--paper)} /* SOLD marking: pure CSS over untouched photo files, so relisting a listing removes every trace instantly. .pw wraps photos (ribbon anchor); the ribbon shows on sold grid cards and the item main photo. */ .pw{position:relative;display:block;overflow:hidden} .card.sold .pw::after, .item-pw.sold::after{ content:"SOLD";position:absolute;top:22px;right:-46px;transform:rotate(38deg); background:var(--red);color:var(--paper);font-weight:700;font-size:13px; letter-spacing:.22em;padding:6px 54px;box-shadow:0 2px 6px rgba(0,0,0,.25); pointer-events:none; } .item-pw.sold::after{font-size:15px;top:30px;right:-50px;padding:7px 60px} .price-strike{text-decoration-color:var(--red);text-decoration-thickness:2px;color:var(--muted);font-weight:500} .sold-word{color:var(--red);font-weight:600} .card-deposit{margin:3px 0 0;font-size:12.5px;color:var(--muted)} .item-deposit{margin:-12px 0 18px;font-size:14px;color:var(--muted)} /* ------- home split (news + categories) ------- */ .split{display:grid;grid-template-columns:1.35fr 1fr;gap:34px} .post{border-left:3px solid var(--green);padding:3px 0 3px 15px;margin-bottom:16px} .post ~ .post{border-left-color:var(--line)} .post-date{margin:0;font-size:12.5px;color:var(--faint)} .post-title{margin:3px 0;font-size:16px;font-weight:600;font-family:var(--sans)} .post p{margin:0;font-size:14.5px;color:var(--muted)} .cats{display:grid;grid-template-columns:1fr 1fr;gap:10px} .cat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:13px 14px;font-size:14px;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)} .cat:hover{border-color:var(--line2)} .cat .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none} /* ------- about + contact ------- */ .about{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .about p{max-width:46em;color:var(--muted)} .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px} .contact-list{list-style:none;padding:0;margin:0;font-size:15px} .contact-list li{margin-bottom:10px} .contact-list strong{display:inline-block;min-width:64px;color:var(--faint);font-weight:500} form label{display:block;font-size:13px;color:var(--muted);margin:12px 0 4px} form input,form textarea{width:100%;border:1px solid var(--line2);border-radius:var(--r-sm);padding:10px 12px;font-size:15px;font-family:var(--sans);background:var(--card);color:var(--ink)} form textarea{min-height:110px;resize:vertical} form button{margin-top:14px} .form-note{font-size:12.5px;color:var(--faint);margin-top:8px} /* ------- for sale page ------- */ .page-head{padding:30px 0 0} .page-head p{color:var(--muted);margin:0 0 18px} .filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px} .chip{font-size:13.5px;padding:7px 16px;border-radius:18px;border:1px solid var(--line2);color:var(--ink);text-decoration:none;background:transparent;cursor:pointer;font-family:var(--sans)} .chip[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#F7F3E8} /* ------- item page ------- */ .back-link{font-size:14px;text-decoration:none;display:inline-block;margin:24px 0 4px} .item-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;padding:14px 0 40px} .item-photo-main{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--photo);border-radius:var(--r-md);display:block} .item-pw{border-radius:var(--r-md)} .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px} .thumbs a{display:block;border-radius:var(--r-sm);overflow:hidden;border:3px solid transparent} .thumbs a[aria-current="true"]{border-color:var(--green)} .thumbs img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--photo)} .item-title{margin:6px 0} .item-price{font-size:24px;color:var(--red);font-weight:600;margin:0 0 18px;font-family:var(--sans)} .details{width:100%;font-size:14.5px;border-collapse:collapse;margin-bottom:18px} .details td{padding:9px 0;border-bottom:1px solid var(--line)} .details td:first-child{color:var(--faint);padding-right:16px} .details tr:last-child td{border-bottom:0} .item-desc{color:var(--muted);margin:0 0 22px} .item-hint{font-size:12.5px;color:var(--faint);margin-top:8px} /* ------- photo lightbox (item pages) ------- */ #main-photo-link{cursor:zoom-in} .lightbox{position:fixed;inset:0;z-index:60;background:rgba(12,9,5,.93); display:flex;align-items:center;justify-content:center} .lightbox img{max-width:94vw;max-height:92vh;object-fit:contain;cursor:zoom-out; border-radius:var(--r-sm);box-shadow:0 20px 60px rgba(0,0,0,.5)} .lightbox button{position:absolute;background:rgba(247,243,232,.12);border:1px solid rgba(247,243,232,.35); color:#F7F3E8;cursor:pointer;border-radius:50%;width:44px;height:44px;font-size:20px; display:flex;align-items:center;justify-content:center;font-family:var(--sans)} .lightbox button:hover{background:rgba(247,243,232,.25)} .lightbox .lb-close{top:18px;right:18px} .lightbox .lb-prev{left:14px;top:50%;transform:translateY(-50%)} .lightbox .lb-next{right:14px;top:50%;transform:translateY(-50%)} .lightbox .lb-count{position:absolute;bottom:16px;left:50%;transform:translateX(-50%); color:#EFE8D8;font-size:13px;letter-spacing:.06em} @media (prefers-reduced-motion: no-preference){ .lightbox{animation:lb-fade .15s ease} @keyframes lb-fade{from{opacity:0}to{opacity:1}} } @media (max-width:540px){ .lightbox .lb-prev,.lightbox .lb-next{display:none} /* swipe instead */ } /* ------- per-listing contact form ------- */ .item-contact{margin-top:26px;border-top:1px solid var(--line);padding-top:16px} .item-contact h3{margin-bottom:2px} /* ------- footer ------- */ .site-footer{border-top:1px solid var(--line);margin-top:20px} .site-footer .wrap{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:22px;padding-bottom:26px;font-size:13.5px;color:var(--muted)} .site-footer a{color:var(--muted)} /* ------- motion (opt-in only when allowed) ------- */ @media (prefers-reduced-motion: no-preference){ .card,.cat{transition:transform .15s ease,border-color .15s ease} .card:hover,.cat:hover{transform:translateY(-2px)} .btn{transition:background .15s ease,border-color .15s ease} } /* ------- responsive ------- */ @media (max-width:860px){ .hero{grid-template-columns:1fr} .hero-copy{padding-left:20px} .hero-photo{min-height:220px} .grid{grid-template-columns:repeat(2,1fr)} .split,.contact-grid,.item-layout{grid-template-columns:1fr} } @media (max-width:540px){ .grid{grid-template-columns:1fr} .site-nav{gap:16px;font-size:14px} .btn-line{margin-left:6px} } /* ---- custom pages (v1.4.0) -------------------------------------- Sections rendered by the Pages feature. Uses the same variables as everything else so all 21 palettes and dark mode apply unchanged. */ .page-title{font-family:var(--serif);font-size:clamp(28px,5vw,38px);margin:4px 0 10px} .lede{font-size:17px;color:var(--muted);max-width:62ch} .pg-block{margin:26px 0} .pg-block h2{font-family:var(--serif);font-size:23px;margin:0 0 10px} .pg-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px} .pg-photo img{width:100%;height:200px;object-fit:cover;border-radius:var(--r-md);border:1px solid var(--line);display:block} .pg-caption{font-size:13px;color:var(--faint);margin:8px 0 0} .pg-btnrow{display:flex;gap:10px;flex-wrap:wrap} .pg-faq{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;margin:8px 0} .pg-faq summary{cursor:pointer;font-weight:600} .pg-faq p{margin:8px 0 2px;color:var(--muted)} .pg-form{max-width:480px} @media (max-width:680px){.pg-photos{grid-template-columns:1fr 1fr}} /* ---- home page photo strip (v1.5.0) ----------------------------- Local copies mirrored from a shared album (photolib). Pure CSS motion: the track is duplicated in the markup so translating half its width loops seamlessly. Pauses on hover; reduced-motion visitors get a plain swipeable row instead (house rule). */ .striphold{overflow:hidden;padding:18px 0;background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .strip{display:flex;gap:14px;width:max-content;animation:striproll 45s linear infinite} .striphold:hover .strip{animation-play-state:paused} .strip img{height:230px;width:auto;border-radius:var(--r-md);border:1px solid var(--line);display:block} @keyframes striproll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion: reduce){ .striphold{overflow-x:auto;-webkit-overflow-scrolling:touch} .strip{animation:none} } @media (max-width:680px){.strip img{height:170px}} /* ---- layout rhythm correction (v1.5.1) -------------------------- One shared column: every band may paint its background full width, but its CONTENT aligns to --maxw. Overrides the full-bleed hero and the edge-to-edge photo strip; appended last so it wins ties. */ :root{--maxw:1100px} .hero{max-width:var(--maxw);margin:0 auto;padding:clamp(28px,5vw,54px) 20px; grid-template-columns:1fr 1.1fr;gap:clamp(20px,4vw,44px);align-items:center;border-bottom:0} /* the panel tint moves to a full-width band painted behind the hero */ body>.hero,main>.hero{box-shadow:0 0 0 100vmax var(--panel);clip-path:inset(0 -100vmax)} .hero-copy{padding:0;background:transparent} .hero-photo{min-height:0} .hero-photo img{aspect-ratio:4/3;height:auto;border-radius:14px; border:1px solid var(--line2);box-shadow:0 10px 26px rgba(46,36,24,.14)} .striphold{max-width:var(--maxw);margin:0 auto;padding:18px 20px;background:transparent; border:0;position:relative} .striphold::before,.striphold::after{content:"";position:absolute;top:0;bottom:0;width:56px; z-index:2;pointer-events:none} .striphold::before{left:0;background:linear-gradient(to right,var(--paper),transparent)} .striphold::after{right:0;background:linear-gradient(to left,var(--paper),transparent)} .striphold:focus-within .strip{animation-play-state:paused} .strip a{display:block;cursor:zoom-in;border-radius:var(--r-md)} .strip a:focus-visible{outline:3px solid var(--green);outline-offset:2px} @media (max-width:760px){.hero{grid-template-columns:1fr}.hero-photo{order:-1}} /* ---- strip lightbox (v1.5.1) ------------------------------------ One photo at a time; close by X, backdrop click, or Esc (site.js). No-JS fallback: the links simply open the photo file itself. */ .lb-back{position:fixed;inset:0;background:rgba(24,20,12,.88);z-index:60; display:flex;align-items:center;justify-content:center;padding:28px} .lb-back img{max-width:100%;max-height:100%;border-radius:10px; box-shadow:0 12px 40px rgba(0,0,0,.5)} .lb-x{position:fixed;top:14px;right:18px;z-index:61;background:rgba(247,243,232,.12); border:1px solid rgba(247,243,232,.4);color:#F7F3E8;font:20px/1 var(--sans); width:42px;height:42px;border-radius:50%;cursor:pointer} .lb-x:hover{background:rgba(247,243,232,.25)} @media (prefers-reduced-motion: reduce){.lb-back img{transition:none}} /* ---- home layout + news page (v1.7.0) --------------------------- Owner-approved reorder: full-width news feed above the listings, What-we-raise panel beside About, plus the News page itself with the :target focus highlight for home page click-throughs. */ .newshead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap} .news-all{font-size:13px;color:var(--accent-ink,var(--green,#4A7042));text-decoration:none;white-space:nowrap} .nrow{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start;text-decoration:none;color:inherit} .nrow.nophoto{grid-template-columns:1fr} .nrow .nthumb{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--line)} .nrow:hover .post-title{text-decoration:underline} .about-duo{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(22px,4vw,48px);align-items:start} .raise-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:0 6px 18px rgba(0,0,0,.12)} .raise-panel h2{font-size:1.15em;margin-top:0} .post-full{border-left:3px solid var(--line2);padding:4px 0 4px 18px;margin-bottom:34px;scroll-margin-top:80px} .post-full:target{border-left-color:var(--green,#4A7042);background:linear-gradient(to right,var(--panel),transparent 70%);border-radius:0 10px 10px 0} .post-full h2{margin:2px 0 10px} .post-full .cover{width:100%;max-width:560px;border-radius:12px;border:1px solid var(--line);display:block;margin:6px 0 12px} .post-full p{max-width:70ch} .post-full .extras{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0} .post-full .extras img{height:130px;width:auto;border-radius:9px;border:1px solid var(--line)} .post-full .lb{cursor:zoom-in} .backtop{font-size:12.5px;text-decoration:none;color:var(--muted)} @media (max-width:760px){.about-duo{grid-template-columns:1fr}} /* ---- news post layout (v1.7.6) ---------------------------------- Owner's QA revision: cover on the LEFT, write-up on the RIGHT, extra photos in a row at the bottom. Overrides the v1.7.0 cover sizing (this block is appended later, so it wins ties). Stacks on narrow screens. */ .post-full .post-body{margin:6px 0 4px} .post-full .post-body.has-cover{display:grid;grid-template-columns:minmax(220px,40%) 1fr;gap:20px;align-items:start} .post-full .post-body .cover{width:100%;max-width:none;margin:0} .post-full .post-text p{margin:0 0 10px;max-width:70ch} .post-full .extras{margin-top:14px} @media (max-width:680px){.post-full .post-body.has-cover{grid-template-columns:1fr}} /* ---- lightbox viewport polish (v1.7.8) --------------------------- iPhones size vh against the largest viewport (toolbars retracted), so an image bottom could tuck under Safari's toolbar. dvh tracks the visible area; older browsers keep the vh lines above. */ .lightbox img{max-height:92dvh} .lb-back img{max-height:96dvh} /* ---- for sale empty states (v1.7.9) ------------------------------ Per-category check-back-soon blocks with two-across photos, plus the single stock line when nothing at all is listed. */ .cat-empty{grid-column:1/-1;border-left:3px solid var(--line2);padding:6px 0 6px 18px;max-width:66ch} .cat-empty p{color:var(--muted);font-size:15.5px;margin:8px 0 0} .cat-empty .btn{margin-top:14px} .cat-empty .egrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px;max-width:720px} .cat-empty .egrid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:11px;border:1px solid var(--line);display:block;cursor:zoom-in} @media (max-width:560px){.cat-empty .egrid{grid-template-columns:1fr}} /* ---- gallery page (v1.9.0) ---- */ .gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:8px} .gallery-grid .gal-item{margin:0} .gallery-grid img{width:100%;height:200px;object-fit:cover;border-radius:10px;border:1px solid var(--line);display:block} .gallery-grid figcaption{font-size:.85rem;color:var(--muted);padding-top:5px} /* ---- info cards block (v1.9.0) ---- */ .tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px} .tile-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px} .tile-card h3{margin:0 0 6px;font-size:1.02rem} .tile-card p{margin:0;color:var(--muted);font-size:.93rem} /* ---- brand accent word (v1.9.0) ---- */ .brand-accent{color:var(--green);font-weight:inherit}