/* ============================================================ BLINK TATTOO REMOVAL — Premium Design System v3 Medical-Scientific Newsroom | Black / White / Electric-Blue Comprehensive stylesheet matching ALL page markup ============================================================ */ /* ── Fonts (preconnect + link handled in ; fallback import) ── */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,800;0,900;1,600&family=Inter:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap'); /* ── Design Tokens ── */ :root{ --ink:#0a0a0a; --ink-soft:#1a1a1a; --graphite:#3a3a3a; --slate:#5a5f66; --mist:#8a9099; --line:#e4e7ec; --line-soft:#eff1f4; --paper:#ffffff; --paper-tint:#f7f8fa; --paper-tint2:#f0f2f5; --blue:#0066ff; --blue-dark:#0047b3; --blue-tint:#e8f0ff; --max:1240px; --gutter:24px; --radius:6px; --shadow-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08); --shadow-md:0 4px 12px rgba(16,24,40,.08),0 2px 4px rgba(16,24,40,.05); --shadow-lg:0 12px 32px rgba(16,24,40,.12); --serif:'Playfair Display',Georgia,serif; --serif-body:'Source Serif 4',Georgia,serif; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; } /* ── Reset ── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ font-family:var(--sans); color:var(--ink); background:var(--paper); line-height:1.6; font-size:16px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;height:auto;display:block} a{color:var(--blue);text-decoration:none;transition:color .15s ease} a:hover{color:var(--blue-dark)} ul{list-style:none} button{font-family:inherit;cursor:pointer} .skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:9999} .skip-link:focus{left:8px;top:8px} /* ============================================================ TOP BAR (article template) ============================================================ */ .topbar{background:var(--ink);color:#fff;font-size:12.5px;letter-spacing:.02em} .topbar-inner{max-width:var(--max);margin:0 auto;padding:7px var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:16px} .topbar-inner a{color:rgba(255,255,255,.85)} .topbar-inner a:hover{color:#fff} .topbar .date{color:rgba(255,255,255,.6)} .topbar .links{display:flex;gap:18px} /* ============================================================ MASTHEAD (article template) + SITE-HEADER (homepage/cat/author) ============================================================ */ .masthead,.site-header{ background:var(--paper); border-bottom:1px solid var(--line); position:sticky;top:0;z-index:900; } .mast-inner{ max-width:var(--max);margin:0 auto;padding:18px var(--gutter); display:flex;align-items:center;justify-content:space-between;gap:24px; } .brand{display:flex;flex-direction:column;text-decoration:none;line-height:1} .brand-name,.site-logo,.footer-logo{ font-family:var(--serif);font-weight:900;letter-spacing:-.01em; color:var(--ink);font-size:26px;text-transform:none; } .brand-name .dot,.logo-dot{color:var(--blue)} .brand-sub{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mist);margin-top:6px;font-weight:600} .mast-actions{display:flex;align-items:center;gap:14px} .mast-search{ border:1px solid var(--line);background:var(--paper-tint);border-radius:100px; padding:8px 14px;font-size:13px;color:var(--slate);display:flex;align-items:center;gap:8px; } .mast-cta{ background:var(--blue);color:#fff;padding:10px 18px;border-radius:100px; font-size:13px;font-weight:600;letter-spacing:.02em; } .mast-cta:hover{background:var(--blue-dark);color:#fff} /* homepage header-inner */ .header-inner{ max-width:var(--max);margin:0 auto;padding:18px var(--gutter); display:flex;align-items:center;justify-content:space-between;gap:24px; } .site-logo{font-size:24px} .site-logo span{color:var(--ink)} .site-logo .logo-dot{color:var(--blue)} /* ============================================================ MAIN NAV ============================================================ */ .mainnav{background:var(--ink);border-bottom:3px solid var(--blue)} .mainnav-inner{ max-width:var(--max);margin:0 auto;padding:0 var(--gutter); display:flex;gap:2px;flex-wrap:wrap; } .mainnav-inner a{ color:rgba(255,255,255,.9);padding:14px 16px;font-size:13.5px;font-weight:600; letter-spacing:.03em;text-transform:uppercase;position:relative; } .mainnav-inner a:hover{color:#fff;background:rgba(255,255,255,.08)} /* homepage main-nav */ .main-nav{display:flex;gap:4px;flex-wrap:wrap} .main-nav a{ color:var(--ink-soft);padding:8px 14px;font-size:14px;font-weight:600; letter-spacing:.01em;border-radius:var(--radius);transition:all .15s ease; } .main-nav a:hover{color:var(--blue);background:var(--blue-tint)} .nav-toggle{ display:none;background:none;border:none;font-size:24px;color:var(--ink); line-height:1;padding:4px 8px; } /* ============================================================ TRUST BAR (article template) ============================================================ */ .trust-bar{background:var(--paper-tint);border-bottom:1px solid var(--line)} .trust-bar-inner{ max-width:var(--max);margin:0 auto;padding:10px var(--gutter); display:flex;gap:28px;flex-wrap:wrap;justify-content:center; } .trust-item{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--slate);font-weight:500} .trust-icon{color:var(--blue);font-size:14px} /* ============================================================ HOMEPAGE HERO ============================================================ */ .homepage-hero{border-bottom:1px solid var(--line);background:var(--paper)} .hero-inner{ max-width:var(--max);margin:0 auto;padding:44px var(--gutter); display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center; } .hero-lead{display:flex;flex-direction:column;align-items:flex-start;gap:16px} .hero-cat-badge,.card-cat,.sec-cat,.related-cat{ display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;padding:4px 11px;border-radius:3px;color:#fff;background:var(--blue); } .hero-title{font-family:var(--serif);font-weight:800;font-size:clamp(30px,4vw,46px);line-height:1.08;letter-spacing:-.015em;color:var(--ink)} .hero-title a{color:inherit} .hero-title a:hover{color:var(--blue)} .hero-deck{font-family:var(--serif-body);font-size:18px;line-height:1.55;color:var(--graphite);max-width:46ch} .hero-meta{font-size:13.5px;color:var(--slate);font-weight:500} .hero-meta a{font-weight:600} .hero-read-more{ margin-top:4px;font-weight:600;font-size:14px;color:var(--blue); display:inline-flex;align-items:center;gap:6px; } .hero-read-more:hover{gap:10px} .hero-image{position:relative} .hero-image img{border-radius:var(--radius);box-shadow:var(--shadow-md);aspect-ratio:16/10;object-fit:cover;width:100%} /* ============================================================ HOMEPAGE WRAP + SECTIONS ============================================================ */ .homepage-wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)} /* Category pills bar */ .cat-pills-bar{padding:26px 0 8px} .cat-pills-inner{display:flex;gap:10px;flex-wrap:wrap} .catpill{ border:1.5px solid var(--line);border-radius:100px;padding:7px 16px; font-size:13px;font-weight:600;color:var(--slate);transition:all .15s ease;background:var(--paper); } .catpill:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-tint)} /* Secondary row */ .secondary-row{padding:30px 0} .secondary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px} .secondary-card{display:flex;flex-direction:column;gap:12px} .sec-img-link img{border-radius:var(--radius);aspect-ratio:16/9;object-fit:cover;width:100%;box-shadow:var(--shadow-sm)} .sec-body{display:flex;flex-direction:column;gap:8px} .sec-title{font-family:var(--serif);font-weight:700;font-size:18px;line-height:1.22;letter-spacing:-.01em} .sec-title a{color:var(--ink)} .sec-title a:hover{color:var(--blue)} .sec-deck{font-size:13.5px;color:var(--slate);line-height:1.5} .sec-meta{font-size:12px;color:var(--mist);font-weight:500} /* Section header */ .section-header{ display:flex;align-items:center;gap:16px;padding:14px 0 22px;margin-top:14px; border-top:2px solid var(--ink); } .section-header h2{font-family:var(--serif);font-weight:800;font-size:24px;letter-spacing:-.01em} .article-grid-section{padding-bottom:40px} /* Cards grid */ .cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} .card{ display:flex;flex-direction:column;background:var(--paper);border-radius:var(--radius); overflow:hidden;transition:transform .2s ease,box-shadow .2s ease; } .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)} .card-img-link{display:block;overflow:hidden;border-radius:var(--radius)} .card-img-link img{aspect-ratio:16/9;object-fit:cover;width:100%;transition:transform .35s ease} .card:hover .card-img-link img{transform:scale(1.04)} .card-body{padding:14px 2px 0;display:flex;flex-direction:column;gap:9px} .card-title{font-family:var(--serif);font-weight:700;font-size:19px;line-height:1.24;letter-spacing:-.01em} .card-title a{color:var(--ink)} .card-title a:hover{color:var(--blue)} .card-deck{font-size:14px;color:var(--slate);line-height:1.5} .card-meta{display:flex;gap:12px;font-size:12px;color:var(--mist);font-weight:500;margin-top:2px} .card-meta span:not(:first-child)::before{content:"·";margin-right:12px;color:var(--line)} /* Ad strip */ .ad-strip{margin:36px 0;padding:20px;background:var(--paper-tint);border-radius:var(--radius);text-align:center;min-height:100px;display:flex;align-items:center;justify-content:center} .ad-strip::before{content:"ADVERTISEMENT";position:absolute;font-size:9px;letter-spacing:.15em;color:var(--mist);transform:translateY(-38px)} /* ============================================================ CATEGORY / AUTHOR HEADERS ============================================================ */ .category-header,.author-header{background:var(--paper-tint);border-bottom:1px solid var(--line)} .category-header-inner{max-width:var(--max);margin:0 auto;padding:48px var(--gutter)} .category-header-inner h1{font-family:var(--serif);font-weight:800;font-size:clamp(30px,4vw,44px);letter-spacing:-.015em;color:var(--ink)} .cat-desc{font-family:var(--serif-body);font-size:17px;color:var(--graphite);margin-top:12px;max-width:60ch} .cat-count{font-size:13px;color:var(--mist);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-top:14px} .author-header-inner{max-width:var(--max);margin:0 auto;padding:44px var(--gutter);display:flex;gap:28px;align-items:center} .author-avatar-lg{ width:96px;height:96px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center; color:#fff;font-weight:700;font-size:32px;font-family:var(--sans);box-shadow:var(--shadow-md); } .author-header-inner h1{font-family:var(--serif);font-weight:800;font-size:clamp(26px,3.4vw,38px);letter-spacing:-.01em} .author-title-line{font-size:14px;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.05em;margin-top:6px} .author-bio-line{font-family:var(--serif-body);font-size:16px;color:var(--graphite);margin-top:12px;max-width:64ch;line-height:1.55} .author-count{font-size:12.5px;color:var(--mist);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-top:12px} .category-header .homepage-wrap,.author-header + .homepage-wrap{padding-top:40px} .homepage-wrap .cards-grid{padding-top:40px} /* ============================================================ ARTICLE PAGE ============================================================ */ .article-wrap{ max-width:var(--max);margin:0 auto;padding:36px var(--gutter); display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:52px;align-items:start; } .article-main{min-width:0;max-width:760px} .breadcrumb{font-size:12.5px;color:var(--mist);margin-bottom:20px;display:flex;gap:8px;flex-wrap:wrap;align-items:center} .breadcrumb a{color:var(--slate);font-weight:500} .breadcrumb .sep{color:var(--line)} .article-kicker{ display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:#fff;background:var(--blue);padding:5px 12px;border-radius:3px;margin-bottom:18px; } .article-headline{font-family:var(--serif);font-weight:800;font-size:clamp(28px,4.2vw,46px);line-height:1.1;letter-spacing:-.015em;color:var(--ink);margin-bottom:18px} .article-deck,.lead{font-family:var(--serif-body);font-size:20px;line-height:1.5;color:var(--graphite);margin-bottom:26px} .article-byline{display:flex;align-items:center;gap:14px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:30px} .byline-avatar{width:46px;height:46px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px;background:var(--blue)} .byline-info{display:flex;flex-direction:column;gap:2px} .byline-name{font-weight:700;font-size:15px;color:var(--ink)} .byline-name a{color:var(--ink)} .byline-name a:hover{color:var(--blue)} .byline-text{font-size:12.5px;color:var(--mist)} .med-disclaimer,.med-note{ background:var(--blue-tint);border-left:3px solid var(--blue);border-radius:0 var(--radius) var(--radius) 0; padding:14px 18px;font-size:13.5px;color:var(--ink-soft);margin-bottom:26px;line-height:1.5; } .article-hero{margin-bottom:32px} .article-hero img{border-radius:var(--radius);box-shadow:var(--shadow-md);width:100%;object-fit:cover} .article-hero figcaption{font-size:12.5px;color:var(--mist);margin-top:10px;font-style:italic;text-align:center} .toc{background:var(--paper-tint);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin-bottom:32px} .toc strong{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--slate);margin-bottom:10px} .toc a{display:block;padding:5px 0;font-size:14px;color:var(--ink-soft)} .toc a:hover{color:var(--blue)} /* Article prose */ .prose{font-family:var(--serif-body);font-size:18px;line-height:1.75;color:var(--ink-soft)} .prose p{margin-bottom:24px} .prose h2{font-family:var(--serif);font-weight:800;font-size:28px;line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin:44px 0 18px} .prose h3{font-family:var(--serif);font-weight:700;font-size:22px;line-height:1.25;color:var(--ink);margin:34px 0 14px} .prose a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px} .prose ul,.prose ol{margin:0 0 24px 26px} .prose li{margin-bottom:10px} .prose ul li{list-style:disc} .prose ol li{list-style:decimal} .prose strong{font-weight:600;color:var(--ink)} .prose blockquote{border-left:3px solid var(--blue);padding:6px 0 6px 22px;margin:26px 0;font-style:italic;color:var(--graphite);font-size:20px} /* Ad unit inside article */ .ad-unit{margin:38px 0;padding:20px;background:var(--paper-tint);border-radius:var(--radius);text-align:center;min-height:120px} .ad-label{font-size:9px;letter-spacing:.15em;color:var(--mist);text-transform:uppercase;margin-bottom:8px} /* Sources */ .sources{background:var(--paper-tint);border-radius:var(--radius);padding:24px 28px;margin:40px 0} .sources h3{font-family:var(--sans);font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);margin-bottom:14px} .sources ul{margin:0} .sources li{font-size:14px;margin-bottom:8px;padding-left:18px;position:relative} .sources li::before{content:"→";position:absolute;left:0;color:var(--blue)} /* FAQ */ .faq{margin:44px 0} .faq h2{font-family:var(--serif);font-weight:800;font-size:28px;margin-bottom:20px;letter-spacing:-.01em} .faq-item{border-bottom:1px solid var(--line);padding:18px 0} .faq-q{font-family:var(--sans);font-weight:700;font-size:17px;color:var(--ink);margin-bottom:8px} .faq-a{font-family:var(--serif-body);font-size:16px;color:var(--graphite);line-height:1.6} /* Tags */ .tags{display:flex;gap:9px;flex-wrap:wrap;margin:34px 0} .tag{background:var(--paper-tint2);color:var(--slate);font-size:12.5px;font-weight:500;padding:6px 13px;border-radius:100px} .tag:hover{background:var(--blue-tint);color:var(--blue)} /* Author box */ .author-box{display:flex;gap:18px;background:var(--paper-tint);border-radius:var(--radius);padding:24px;margin:40px 0} .author-avatar{width:56px;height:56px;border-radius:50%;flex-shrink:0} .author-content{flex:1} .author-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--mist);font-weight:600;margin-bottom:4px} .author-name{font-family:var(--serif);font-weight:700;font-size:19px;margin-bottom:8px} .author-name a{color:var(--ink)} .author-bio{font-size:14.5px;color:var(--slate);line-height:1.6} /* Related */ .related{margin:48px 0;border-top:2px solid var(--ink);padding-top:26px} .related h2{font-family:var(--serif);font-weight:800;font-size:24px;margin-bottom:22px;letter-spacing:-.01em} .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .related-card{display:flex;flex-direction:column;gap:8px} .related-cat{align-self:flex-start;font-size:10.5px;padding:3px 9px} .related-title{font-family:var(--serif);font-weight:700;font-size:16px;line-height:1.25} .related-title a{color:var(--ink)} .related-title a:hover{color:var(--blue)} /* ============================================================ ARTICLE SIDEBAR ============================================================ */ .article-sidebar{position:sticky;top:96px;display:flex;flex-direction:column;gap:30px} .sidebar-widget{border-top:2px solid var(--ink);padding-top:16px} .sidebar-cat-label{font-family:var(--sans);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);margin-bottom:14px} .sidebar-list{display:flex;flex-direction:column;gap:14px} .sidebar-list a{display:block;font-family:var(--serif);font-weight:600;font-size:15px;line-height:1.3;color:var(--ink-soft);padding-bottom:14px;border-bottom:1px solid var(--line-soft)} .sidebar-list a:hover{color:var(--blue)} .sidebar-newsletter{background:var(--ink);color:#fff;border-radius:var(--radius);padding:24px} .sidebar-newsletter h3{font-family:var(--serif);font-size:20px;margin-bottom:8px} .sidebar-newsletter p{font-size:13.5px;color:rgba(255,255,255,.75);margin-bottom:14px} .sidebar-newsletter input{width:100%;padding:11px 14px;border:none;border-radius:var(--radius);margin-bottom:10px;font-size:14px} .sidebar-newsletter button{width:100%;background:var(--blue);color:#fff;border:none;padding:11px;border-radius:var(--radius);font-weight:600;font-size:14px} .sidebar-newsletter button:hover{background:var(--blue-dark)} /* ============================================================ NEWSLETTER STRIP ============================================================ */ .newsletter-strip{background:var(--ink);color:#fff;margin-top:20px} .newsletter-inner{max-width:760px;margin:0 auto;padding:52px var(--gutter);text-align:center} .newsletter-inner h2{font-family:var(--serif);font-weight:800;font-size:32px;letter-spacing:-.01em;margin-bottom:10px} .newsletter-inner p{font-size:15.5px;color:rgba(255,255,255,.78);margin-bottom:24px} .newsletter-form{display:flex;gap:10px;max-width:480px;margin:0 auto} .newsletter-form input{flex:1;padding:13px 18px;border:none;border-radius:100px;font-size:14.5px} .newsletter-form button{background:var(--blue);color:#fff;border:none;padding:13px 26px;border-radius:100px;font-weight:600;font-size:14.5px;white-space:nowrap} .newsletter-form button:hover{background:var(--blue-dark)} /* ============================================================ TRUST / POLICY PAGES ============================================================ */ .trust-page-wrap{max-width:760px;margin:0 auto;padding:52px var(--gutter)} .trust-article h1{font-family:var(--serif);font-weight:800;font-size:clamp(30px,4vw,44px);letter-spacing:-.015em;margin-bottom:26px;color:var(--ink)} .trust-article h2{font-family:var(--serif);font-weight:700;font-size:24px;margin:36px 0 14px;color:var(--ink)} .trust-article p{font-family:var(--serif-body);font-size:17px;line-height:1.7;color:var(--ink-soft);margin-bottom:18px} .trust-article a{color:var(--blue);text-decoration:underline;text-underline-offset:2px} .contact-form-placeholder{font-family:var(--sans)} /* ============================================================ FOOTER (both templates) ============================================================ */ .site-footer,.footer{background:var(--ink);color:#fff;margin-top:60px} .footer-inner,.foot-top{max-width:var(--max);margin:0 auto;padding:56px var(--gutter) 40px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px} .footer-brand,.foot-brand{max-width:300px} .footer-logo{color:#fff;font-size:22px;display:block;margin-bottom:14px} .footer-brand p,.foot-brand p{font-size:14px;color:rgba(255,255,255,.65);line-height:1.6} .footer-nav{display:contents} .footer-col,.foot-col{display:flex;flex-direction:column;gap:11px} .footer-col strong,.foot-col strong{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.5);margin-bottom:5px;font-weight:700} .footer-col a,.foot-col a{font-size:14px;color:rgba(255,255,255,.82)} .footer-col a:hover,.foot-col a:hover{color:#fff} .footer-bottom,.foot-bottom{border-top:1px solid rgba(255,255,255,.12)} .footer-bottom p,.foot-bottom p{max-width:var(--max);margin:0 auto;padding:22px var(--gutter);font-size:12.5px;color:rgba(255,255,255,.55);text-align:center} .footer-bottom a,.foot-bottom a{color:rgba(255,255,255,.72)} .foot-disclaimer{max-width:var(--max);margin:0 auto;padding:0 var(--gutter) 24px;font-size:12px;color:rgba(255,255,255,.5);line-height:1.6} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:1080px){ .article-wrap{grid-template-columns:1fr;gap:0} .article-sidebar{position:static;margin-top:48px;border-top:2px solid var(--line);padding-top:36px} .secondary-grid{grid-template-columns:repeat(2,1fr)} .cards-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:820px){ .hero-inner{grid-template-columns:1fr;gap:28px;padding:32px var(--gutter)} .hero-image{order:-1} .footer-inner,.foot-top{grid-template-columns:1fr 1fr;gap:32px} .footer-brand,.foot-brand{grid-column:1/-1} .trust-bar-inner{gap:16px} } @media(max-width:680px){ body{font-size:15.5px} .nav-toggle{display:block} .main-nav,.mainnav-inner{ display:none;position:absolute;top:100%;left:0;right:0;background:var(--ink); flex-direction:column;padding:8px var(--gutter) 16px;box-shadow:var(--shadow-lg); } .main-nav.open,.mainnav-inner.open{display:flex} .main-nav a{color:#fff;padding:12px 8px;border-bottom:1px solid rgba(255,255,255,.08)} .main-nav a:hover{background:rgba(255,255,255,.08);color:#fff} .mainnav{position:relative} .secondary-grid{grid-template-columns:1fr} .cards-grid{grid-template-columns:1fr} .related-grid{grid-template-columns:1fr} .topbar .links{display:none} .mast-search{display:none} .author-header-inner{flex-direction:column;text-align:center;align-items:center} .newsletter-form{flex-direction:column} .newsletter-form button{width:100%} .prose{font-size:17px} .article-headline{font-size:28px} .hero-title{font-size:30px} } /* homepage needs its own nav-toggle handling */ @media(max-width:680px){ .site-header{position:relative} .header-inner .main-nav{top:100%} } /* ============================================================ SEARCH PAGE ============================================================ */ .search-page{max-width:900px;margin:0 auto;padding:48px var(--gutter) 72px} .search-head{margin-bottom:32px} .search-head h1{font-family:var(--serif);font-weight:800;font-size:clamp(30px,4vw,44px);letter-spacing:-.015em;margin:14px 0 10px;color:var(--ink)} .search-sub{font-size:15.5px;color:var(--slate);max-width:640px;line-height:1.55;margin-bottom:26px} .search-box{position:relative} .search-box input{ width:100%;box-sizing:border-box;font-family:var(--sans);font-size:17px; padding:16px 18px;border:2px solid var(--ink);border-radius:4px;color:var(--ink); background:#fff;outline:none;transition:box-shadow .15s,border-color .15s; } .search-box input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,102,255,.15)} .search-box input::placeholder{color:var(--mist)} .search-status{margin-top:14px;font-size:13.5px;color:var(--mist);font-weight:500;letter-spacing:.01em} .search-results{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:12px} .search-card{ display:flex;flex-direction:column;gap:8px;padding:20px 22px;border:1px solid var(--line); border-radius:6px;text-decoration:none;background:#fff;transition:box-shadow .15s,transform .12s,border-color .15s; } .search-card:hover{box-shadow:var(--shadow-md,0 6px 22px rgba(0,0,0,.08));transform:translateY(-2px);border-color:var(--ink)} .search-cat{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;border:1px solid;border-radius:999px;padding:3px 10px;align-self:flex-start} .search-title{font-family:var(--serif);font-weight:700;font-size:19px;line-height:1.25;color:var(--ink);letter-spacing:-.01em} .search-deck{font-size:14px;color:var(--slate);line-height:1.5} .search-date{font-size:12.5px;color:var(--mist);font-weight:500;margin-top:auto;padding-top:4px} @media(max-width:680px){ .search-results{grid-template-columns:1fr} .search-box input{font-size:16px} } /* ── Internal Linking: Guide Callout (Mission C, Phase 6) ── */ .guide-callout{ display:flex;align-items:flex-start;gap:14px; margin:0 0 30px;padding:16px 20px; background:#f5f8ff;border:1px solid #dbe6ff; border-left:4px solid var(--blink,#0066ff);border-radius:8px; } .guide-callout-label{ flex:0 0 auto;display:inline-block; font-family:var(--sans,'Inter',sans-serif); font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--blink,#0066ff);background:#e4edff; padding:5px 10px;border-radius:5px;margin-top:1px; } .guide-callout p{ margin:0;font-size:15px;line-height:1.55;color:#1a1f2e; font-family:var(--serif,'Source Serif 4',serif); } .guide-callout a{color:var(--blink,#0066ff);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(0,102,255,.35)} .guide-callout a:hover{border-bottom-color:var(--blink,#0066ff)} @media(max-width:680px){ .guide-callout{flex-direction:column;gap:8px;padding:14px 16px} }