/* One stylesheet, both brands. Brand switches on . */ :root{ --measure:40rem; --radius:2px; --ink:#241c1f; --muted:#6b5f63; --line:#e6dcdd; --accent:#82203E; --soft:#F6DCDF; --canvas:#FBF5F5; --paper:#fff; --display:"Cormorant Garamond",Didot,"Bodoni 72",Garamond,serif; --ui:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } [data-brand="lovedline"]{ --ink:#17324E; --muted:#5A6B7C; --line:#E2DACE; --accent:#17324E; --soft:#E9E2D6; --canvas:#FAF7F2; --paper:#fff; --gold:#988C63; --display:"Jost",-apple-system,BlinkMacSystemFont,sans-serif; --ui:"Jost",-apple-system,BlinkMacSystemFont,sans-serif; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--ui); font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:inherit} /* ---------- chrome ---------- */ .disclosure{background:var(--ink);color:#fff;font-size:10px;letter-spacing:.18em; text-transform:uppercase;text-align:center;padding:9px 16px;font-weight:500} /* a sponsorship line rather than a banner, still above the headline, still plain language, just not shouted. Never remove it: undisclosed native advertising. */ .disclosure--quiet{background:var(--paper);color:var(--muted);font-size:11px; letter-spacing:.2em;font-weight:500;padding:13px 16px 12px} .masthead{background:var(--paper);border-bottom:1px solid var(--line); padding:18px 16px;text-align:center} .masthead b{font-family:var(--ui);font-size:11px;letter-spacing:.32em; text-transform:uppercase;font-weight:600;color:var(--accent)} /* a personal blog masthead rather than a brand one */ .masthead--blog{padding:26px 16px 22px} .masthead--blog b{display:block;font-family:var(--display);font-size:1.7rem; letter-spacing:.01em;text-transform:none;font-weight:500;color:var(--ink)} .masthead--blog span{display:block;margin-top:7px;font-size:9px;letter-spacing:.3em; text-transform:uppercase;color:var(--muted)} .sig{font-family:var(--display);font-style:italic;font-size:1.5rem;color:var(--accent); margin:26px 0 0} /* ---------- article ---------- */ .wrap{max-width:var(--measure);margin:0 auto;padding:0 20px} article{background:var(--paper);padding-bottom:56px} .head{padding:44px 0 0} .kicker{font-size:10px;letter-spacing:.24em;text-transform:uppercase; font-weight:600;color:var(--accent);margin:0 0 18px} h1{font-family:var(--display);font-weight:500;font-size:clamp(2rem,6.2vw,3.1rem); line-height:1.12;letter-spacing:-.01em;margin:0 0 20px} [data-brand="lovedline"] h1{font-weight:500;letter-spacing:-.02em} .dek{font-size:1.16rem;line-height:1.6;color:var(--muted);margin:0 0 26px; font-family:var(--display)} [data-brand="lovedline"] .dek{font-family:var(--ui);font-weight:300;font-size:1.1rem} .byline{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:11px; letter-spacing:.12em;text-transform:uppercase;color:var(--muted); border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:14px 0;margin:0 0 34px} .byline span+span::before{content:"·";margin-right:10px;color:var(--line)} figure{margin:0 0 12px} figure img{width:100%;border-radius:var(--radius)} figcaption{font-size:12px;color:var(--muted);padding:10px 0 0;line-height:1.5} .hero{margin-bottom:34px} p{margin:0 0 20px} .lede{font-size:1.2rem;line-height:1.6} .lede::first-letter{font-family:var(--display);float:left;font-size:3.4em; line-height:.78;padding:.06em .1em 0 0;color:var(--accent);font-weight:500} h2{font-family:var(--display);font-weight:500;font-size:clamp(1.45rem,4vw,1.9rem); line-height:1.25;margin:42px 0 16px;letter-spacing:-.01em} [data-brand="lovedline"] h2{font-weight:500} blockquote{margin:34px 0;padding:0 0 0 22px;border-left:3px solid var(--accent); font-family:var(--display);font-style:italic;font-size:1.45rem;line-height:1.35; color:var(--accent)} [data-brand="lovedline"] blockquote{font-style:normal;font-weight:300; border-left-color:var(--gold);color:var(--ink)} .strip{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:34px 0} .strip figure{margin:0} figure.shot{margin:34px 0} figure.shot img{width:100%;border-radius:var(--radius)} .avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 25%; margin-right:2px} .byline{align-items:center} .byline .avatar+span::before{content:none} .brandshots{margin:26px 0 0} .brandshots .strip{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0} .brandshots img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius)} /* ---------- numbered picks ---------- */ .pick{margin:52px 0;padding-top:44px;border-top:1px solid var(--line)} .pick-n{font-family:var(--display);font-size:2.4rem;line-height:1;color:var(--soft); margin:0 0 14px;font-weight:500} [data-brand="lovedline"] .pick-n{color:var(--soft)} .pick figure{margin:0 0 22px} .pick h2{margin-top:0} .caveat{font-size:14px;line-height:1.6;color:var(--muted);border-left:2px solid var(--line); padding-left:16px;margin:24px 0} .pick-buy{margin:22px 0 0} .pick-buy a{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;text-decoration:none; border-top:1px solid var(--line);padding-top:14px} .pick-buy .pn{font-weight:600;font-size:14px} .pick-buy .pp{font-size:14px;color:var(--muted)} .pick-buy .pl{margin-left:auto;font-size:11px;letter-spacing:.14em;text-transform:uppercase; font-weight:600;color:var(--accent);white-space:nowrap} .pick-buy a:hover .pl{text-decoration:underline} .panel dd .pp{color:var(--muted);font-size:14px} .panel dd a{font-weight:600} .offer--all{display:block} .masthead--blog .logo{display:block;margin:0 auto;height:52px;width:auto} /* ---------- details + faq ---------- */ .panel{background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius); padding:24px 22px;margin:38px 0} .panel h3{font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:600; color:var(--accent);margin:0 0 16px} .panel dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:15px} .panel dt{font-weight:600;color:var(--muted);font-size:11px;letter-spacing:.1em; text-transform:uppercase;padding-top:3px} .panel dd{margin:0} details{border-bottom:1px solid var(--line);padding:5px 0} details:last-of-type{border-bottom:0;padding-bottom:0} summary{cursor:pointer;font-weight:600;font-size:15px;list-style:none;padding:9px 0; display:flex;justify-content:space-between;gap:14px;align-items:baseline} summary::-webkit-details-marker{display:none} summary::after{content:"+";color:var(--accent);font-weight:400;font-size:20px;line-height:1} details[open] summary::after{content:"\2212"} details p{margin:12px 0 0;font-size:15px;color:var(--muted)} /* ---------- cta ---------- */ .btn{display:block;text-align:center;background:var(--accent);color:#fff; text-decoration:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase; font-weight:600;padding:17px 22px;border-radius:var(--radius); transition:opacity .15s ease} .btn:hover{opacity:.86} .inline-cta{margin:38px 0;padding:26px 22px;background:var(--soft); border-radius:var(--radius);text-align:center} .inline-cta p{font-family:var(--display);font-size:1.25rem;line-height:1.35;margin:0 0 18px} [data-brand="lovedline"] .inline-cta p{font-family:var(--ui);font-weight:300} .offer--quiet{border-color:var(--line)} .offer{border:1px solid var(--accent);border-radius:var(--radius); margin:44px 0 0;overflow:hidden;background:var(--paper)} .offer img{width:100%;aspect-ratio:1/1;object-fit:cover} .offer-body{padding:24px 22px} .offer-label{font-size:10px;letter-spacing:.24em;text-transform:uppercase; color:var(--accent);font-weight:600;margin:0 0 10px} .offer h3{font-family:var(--display);font-weight:500;font-size:1.6rem;line-height:1.2; margin:0 0 12px} .prices{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 6px} .now{font-size:1.65rem;font-weight:600;color:var(--accent)} .was{text-decoration:line-through;color:var(--muted);font-size:1rem} .save{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600; background:var(--accent);color:#fff;padding:4px 9px;border-radius:var(--radius)} .opts{font-size:13px;color:var(--muted);margin:0 0 20px} .opts b{color:var(--ink);font-weight:600} .fineprint{font-size:12px;line-height:1.6;color:var(--muted);padding:34px 0 0; border-top:1px solid var(--line);margin-top:44px} /* ---------- sticky bar ---------- */ .sticky{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--paper); border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom)); display:flex;align-items:center;gap:14px; box-shadow:0 -6px 24px rgba(0,0,0,.07)} .sticky .meta{flex:1;min-width:0} .sticky .t{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;display:block} .sticky .p{font-size:12px;color:var(--accent);font-weight:600} .sticky .btn{padding:13px 20px;white-space:nowrap} .sticky.hold{transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.7,.3,1)} .sticky.hold.on{transform:none} @media(prefers-reduced-motion:reduce){.sticky.hold{transition:none}} body{padding-bottom:78px} @media(min-width:760px){ .sticky{display:none} body{padding-bottom:0} .head{padding-top:64px} .offer{display:grid;grid-template-columns:1fr 1.15fr} .offer img{height:100%} .offer-body{display:flex;flex-direction:column;justify-content:center} } /* ---------- index ---------- */ .idx{max-width:980px;margin:0 auto;padding:48px 20px 80px} .idx h1{font-family:var(--ui);font-size:1.5rem;font-weight:600;letter-spacing:-.01em} .idx h2{font-family:var(--ui);font-size:11px;letter-spacing:.24em;text-transform:uppercase; color:var(--accent);margin:44px 0 16px;font-weight:600} .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px} .card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius); text-decoration:none;overflow:hidden;display:block} .card img{aspect-ratio:4/3;object-fit:cover;width:100%} .card div{padding:14px 15px} .card .k{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent); font-weight:600} .card .h{font-size:14px;line-height:1.35;margin:7px 0 0;font-weight:500}