/* RAREBLOG engine — Exaggerated Minimalism editorial system. Accent tokens (--brass/--brass-2/--ink/--paper) are injected per-site in . */ :root{ --accent:var(--brass,#B8862F); --accent-2:var(--brass-2,#9a6f22); --ink:#141210; --paper:#F7F3EA; --card:#fffdf8; --line:#e5ded0; --mut:#6b645a; --serif:'Newsreader',Georgia,'Times New Roman',serif; --sans:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --max:1180px; --wide:1360px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans); font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} img{max-width:100%;height:auto;display:block} h1,h2,h3,h4{font-family:var(--serif);font-weight:700;letter-spacing:-0.02em;line-height:1.05;margin:0} .tnum{font-variant-numeric:tabular-nums} /* ---- news ticker ---- */ .ticker{background:var(--ink);color:#efe9dd;overflow:hidden;white-space:nowrap; border-bottom:1px solid rgba(255,255,255,.08);font-size:.82rem} .ticker .row{display:inline-flex;align-items:center;gap:2.5rem;padding:.5rem 0; animation:tick 40s linear infinite} .ticker .lab{background:var(--accent);color:#fff;font-weight:700;text-transform:uppercase; letter-spacing:.08em;padding:.5rem .8rem;position:sticky;left:0} .ticker b{color:var(--accent)} @keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.ticker .row{animation:none;white-space:normal}} /* ---- header / nav ---- */ header.site{position:sticky;top:0;z-index:30;background:rgba(255,253,248,.94); backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} .navwrap{max-width:var(--wide);margin:0 auto;display:flex;align-items:center;justify-content:space-between; gap:1rem;padding:.7rem clamp(1rem,4vw,2rem)} .brand{display:flex;align-items:center;gap:.6rem;color:var(--ink)} .brand .logo{width:34px;height:34px;color:var(--accent);flex:none} .brand .word{font-family:var(--serif);font-weight:800;font-size:1.35rem;letter-spacing:-0.02em} header.site nav{display:flex;flex-wrap:wrap;gap:.1rem 1.1rem;font-size:.8rem;font-weight:500; text-transform:uppercase;letter-spacing:.05em} header.site nav a{color:var(--mut);padding:.2rem 0;border-bottom:2px solid transparent} header.site nav a:hover{color:var(--ink);border-color:var(--accent)} main{max-width:var(--max);margin:0 auto;padding:0 clamp(1rem,4vw,2rem)} .sec-title{font-size:1.05rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700; font-family:var(--sans);color:var(--ink);border-bottom:2px solid var(--ink); padding-bottom:.4rem;margin:2.6rem 0 1.3rem;display:flex;justify-content:space-between;align-items:baseline} .sec-title a{color:var(--accent-2);font-size:.8rem} /* ---- exaggerated-minimalism hero ---- */ .hero-home{max-width:var(--wide);margin:0 auto;padding:clamp(2rem,5vw,3.5rem) clamp(1rem,4vw,2rem) 0} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3rem);align-items:center} .eyebrow{color:var(--accent-2);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;margin:0 0 1rem} .hero-home h1{font-size:clamp(2.6rem,7vw,6rem);font-weight:800;letter-spacing:-0.035em;margin:0 0 1.1rem} .hero-home .sub{color:var(--mut);font-size:1.15rem;max-width:52ch;margin:0} .hero-art{border-radius:14px;overflow:hidden;aspect-ratio:16/11;background:var(--ink)} .hero-art img{width:100%;height:100%;object-fit:cover} @media (max-width:820px){.hero-grid{grid-template-columns:1fr}.hero-art{order:-1;aspect-ratio:16/9}} /* ---- market movers strip ---- */ .movers{max-width:var(--wide);margin:1.6rem auto 0;padding:0 clamp(1rem,4vw,2rem); display:flex;gap:.6rem;flex-wrap:wrap} .mover{border:1px solid var(--line);background:var(--card);border-radius:999px; padding:.4rem .9rem;font-size:.82rem;display:flex;gap:.5rem;align-items:center} .mover .nm{font-weight:600} .mover .up{color:#1a7f4b;font-weight:700} .mover .dn{color:#b8362e;font-weight:700} /* ---- lead story block ---- */ .lead{display:grid;grid-template-columns:1.5fr 1fr;gap:1.6rem;margin-top:.5rem} .lead .big{position:relative;border-radius:12px;overflow:hidden;min-height:340px;background:var(--ink);color:#fff} .lead .big img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62} .lead .big .cap{position:relative;z-index:1;padding:clamp(1.2rem,3vw,2rem);display:flex;flex-direction:column;justify-content:flex-end;height:100%} .lead .big .tag{color:#fff;background:var(--accent);align-self:flex-start;font-size:.7rem; text-transform:uppercase;letter-spacing:.08em;font-weight:700;padding:.25rem .6rem;border-radius:3px;margin-bottom:.7rem} .lead .big h2{color:#fff;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800} .lead .big p{color:#e9e3d7;margin:.6rem 0 0;font-family:var(--sans);font-size:.98rem;max-width:46ch} .lead .stack{display:flex;flex-direction:column;divide:1px} .lead .stack a{padding:.9rem 0;border-bottom:1px solid var(--line)} .lead .stack a:first-child{padding-top:0} .lead .stack .k{color:var(--accent-2);font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700} .lead .stack h3{font-size:1.12rem;margin:.25rem 0 0;font-weight:600} .lead .stack a:hover h3{color:var(--accent-2)} @media (max-width:820px){.lead{grid-template-columns:1fr}} /* ---- card grid ---- */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.5rem} .card{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden; display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease} .card:hover{transform:translateY(-3px);box-shadow:0 16px 34px -20px rgba(20,18,16,.5)} .card .thumb{aspect-ratio:16/10;background:#e8e1d2;overflow:hidden} .card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease} .card:hover .thumb img{transform:scale(1.04)} .card .body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;flex:1} .tag{align-self:flex-start;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--accent-2)} .card h3{font-size:1.16rem;line-height:1.22;font-weight:600} .card h3 a:hover{color:var(--accent-2)} .card p{margin:0;color:var(--mut);font-size:.92rem} .card .meta{margin-top:auto;color:var(--mut);font-size:.76rem} /* ---- market snapshot table ---- */ .snapshot{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--card)} table.market{width:100%;border-collapse:collapse;font-size:.92rem;min-width:520px} table.market th,table.market td{text-align:left;padding:.7rem 1rem;border-bottom:1px solid var(--line)} table.market th{font-family:var(--sans);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);font-weight:700} table.market td.num{text-align:right;font-variant-numeric:tabular-nums} table.market tr:last-child td{border-bottom:0} .chg.up{color:#1a7f4b;font-weight:700} .chg.dn{color:#b8362e;font-weight:700} /* ---- hub ---- */ .hub-head{padding:clamp(2rem,5vw,3.5rem) 0 1rem} .hub-head h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:800;letter-spacing:-0.03em;margin:0 0 .5rem} .hub-head p{color:var(--mut);margin:0;font-size:1.08rem;max-width:62ch} /* ---- article ---- */ .article{max-width:730px} .crumbs{color:var(--mut);font-size:.82rem;padding:1.5rem 0 .4rem} .crumbs a:hover{color:var(--accent-2)} .kicker{color:var(--accent-2);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem} .article h1{font-size:clamp(2rem,5vw,3.3rem);font-weight:800;letter-spacing:-0.03em;line-height:1.05;margin:.4rem 0 .7rem} .article .lede{font-size:1.3rem;line-height:1.5;color:#3a352d;margin:0 0 1rem;font-family:var(--serif)} .byline{color:var(--mut);font-size:.85rem;border-bottom:1px solid var(--line);padding-bottom:1rem;margin-bottom:1.3rem} .article .hero{margin:0 0 1.7rem;border-radius:12px;overflow:hidden} .article .hero img{width:100%;aspect-ratio:16/9;object-fit:cover} .article section h2{font-size:1.55rem;font-weight:700;margin:2.1rem 0 .6rem} .article section p{font-size:1.1rem;margin:0 0 1rem} .article section a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px} /* ---- article FAQ ---- */ .faq{margin-top:2.4rem;border-top:1px solid var(--line);padding-top:1.4rem} .faq h2{font-size:1.55rem;margin:0 0 1rem} .faq dt{font-family:var(--serif);font-size:1.15rem;font-weight:600;margin-top:1rem} .faq dd{margin:.3rem 0 0;color:var(--mut);font-size:1.02rem} .nlform-page{display:flex;gap:.5rem;max-width:460px;margin:1.2rem 0;flex-wrap:wrap} .nlform-page input{flex:1;min-width:200px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;padding:.6rem .8rem;font-family:var(--sans)} .nlform-page button{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:.6rem 1.3rem;font-weight:700;cursor:pointer} /* ---- footer ---- */ footer.site{margin-top:4.5rem;background:var(--ink);color:#cfc7b9;padding:3rem clamp(1rem,4vw,2rem)} .footwrap{max-width:var(--wide);margin:0 auto} footer.site .f-brand{display:flex;align-items:center;gap:.6rem;color:var(--paper);font-family:var(--serif);font-weight:800;font-size:1.2rem;margin-bottom:.7rem} footer.site .f-brand .logo{width:28px;height:28px;color:var(--accent)} footer.site .f-blurb{max-width:60ch;color:#a89f90;margin:0 0 1rem} footer.site .f-links{margin:0 0 .8rem;font-size:.85rem} footer.site .f-links a{color:#cfc7b9;border-bottom:1px solid transparent} footer.site .f-links a:hover{color:var(--accent);border-color:var(--accent)} footer.site .f-legal{font-size:.8rem;color:#8a8072;margin:0} :focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:2px} @media (max-width:640px){ header.site nav{display:none} body{font-size:16px} }