:root { --lime: #c8ff24; --ink: #171916; --paper: #ffffff; --frame: min(1344px, calc(100vw - 48px)); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; } a { color: inherit; text-decoration: none; } button, input, textarea, select { color: inherit; font: inherit; } img { display: block; max-width: 100%; height: auto; } :focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .screen-reader-text:focus { top: 8px; left: 8px; z-index: 10000; width: auto; height: auto; clip: auto; padding: 12px 16px; background: #fff; color: #000; } .skipLink { position: fixed; top: 8px; left: 8px; z-index: 10000; transform: translateY(-160%); padding: 12px 16px; background: #fff; color: #000; font-weight: 800; } .skipLink:focus { transform: none; } .site { min-height: 100vh; background: var(--paper); } .frame { width: var(--frame); margin-inline: auto; } .siteHeader { position: sticky; top: 0; z-index: 100; } .admin-bar .siteHeader { top: 32px; } .utility { height: 35px; background: #050505; color: var(--lime); font-size: 12px; font-weight: 900; } .utility__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; padding-inline: 8px; } .utility__weather { display: flex; align-items: center; } .utility__weather i { width: 1px; height: 15px; margin: 0 10px; background: var(--lime); } .utility__updates { letter-spacing: -.02em; } .masthead { background: var(--lime); color: var(--ink); box-shadow: 0 1px 0 rgb(0 0 0 / 8%); } .masthead__top { min-height: 57px; display: flex; align-items: center; justify-content: space-between; } .brand { display: inline-flex; align-items: center; font-weight: 950; line-height: .76; letter-spacing: -.075em; } .brandLogo { display: block; width: 190px; height: auto; max-height: 82px; } .brand__monogram { display: flex; height: 63px; align-items: stretch; } .brand__monogram i { display: grid; place-items: center; width: 57px; overflow: hidden; background: var(--ink); color: var(--lime); font-size: 40px; font-style: normal; font-weight: 950; letter-spacing: -.18em; } .brand__monogram i:first-child { border-radius: 0 34px 34px 0; } .brand__monogram i:nth-child(2) { clip-path: polygon(0 100%, 50% 0, 100% 100%); padding-top: 18px; } .brand__monogram i:last-child { clip-path: polygon(0 0, 100% 0, 100% 24%, 68% 24%, 68% 100%, 32% 100%, 32% 24%, 0 24%); } .brand__name { font-size: 17px; } .masthead__tools { display: flex; align-items: center; gap: 20px; align-self: flex-start; padding-top: 16px; } .searchButton { min-height: 36px; border: 0; background: transparent; padding: 5px 0; font-size: 12px; font-weight: 800; cursor: pointer; } .toolLink { background: var(--ink); color: var(--lime); padding: 6px 10px 5px; font-size: 10px; font-weight: 950; text-transform: uppercase; } .toolLink:hover, .toolLink:focus-visible { background: #000; color: #fff; } .menuButton { display: none; width: 38px; padding: 6px; border: 0; background: transparent; } .menuButton i { display: block; height: 3px; margin: 6px 0; background: var(--ink); } .nav { background: var(--lime); } .nav__inner { min-height: 46px; } .nav ul { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: clamp(18px, 2vw, 34px); margin: 0; padding: 0; list-style: none; } .nav li { margin: 0; padding: 0; } .nav a { padding: 14px 0 12px; border-bottom: 3px solid transparent; font-size: 14px; font-weight: 850; letter-spacing: -.04em; white-space: nowrap; } .nav a:hover, .nav a:focus-visible { border-color: var(--ink); } .headerStudy { position: relative; min-height: 690px; padding: 0 0 78px; overflow: hidden; background: var(--lime); } .headerStudy__angle { position: absolute; inset: auto 0 0; height: 235px; background: var(--paper); clip-path: polygon(0 58%, 100% 0, 100% 100%, 0 100%); } .leadGrid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(320px, 1fr); gap: 66px; align-items: start; } .featuredCard { position: relative; display: grid; grid-template-rows: auto 1fr; min-width: 0; height: 100%; } .featuredCard--main { align-self: start; grid-template-rows: auto auto; height: auto; } .featuredCard__image { position: relative; display: block; aspect-ratio: 16 / 10.2; overflow: hidden; background: #bbc1b3; } .featuredCard__image--main { aspect-ratio: 16 / 9.3; } .featuredCard__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; } .categoryFlag { position: absolute; top: 0; right: 0; z-index: 2; padding: 7px 9px 6px; background: var(--lime); color: var(--ink); font-size: 10px; font-weight: 900; } .featuredCard__copy { display: grid; grid-template-columns: minmax(0, 1fr) 58px; gap: 22px; align-items: start; min-height: 112px; padding: 17px 17px 16px; background: var(--ink); color: var(--lime); transition: background .2s ease, color .2s ease; } .featuredCard__copy--main { min-height: 108px; padding: 20px 32px; grid-template-columns: minmax(0, 1fr) 66px; } .featuredCard__copy h1, .featuredCard__copy h2 { margin: 0; font-weight: 500; letter-spacing: -.05em; } .featuredCard__copy h1, .featuredCard__copy h2, .featuredCard__copy .cardAuthor { color: var(--lime); } .featuredCard__copy h1 { max-width: 760px; font-size: clamp(34px, 3.15vw, 51px); line-height: .96; } .featuredCard__copy h2 { font-size: clamp(20px, 1.55vw, 27px); line-height: 1.02; } .featuredCard--side .featuredCard__copy h2, .categoryLead__side .categoryLead__copy h2 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .featuredCard:hover .featuredCard__copy, .featuredCard:focus-within .featuredCard__copy { background: var(--lime); color: var(--ink); } .featuredCard:hover .featuredCard__copy h1, .featuredCard:hover .featuredCard__copy h2, .featuredCard:hover .featuredCard__copy .cardAuthor, .featuredCard:focus-within .featuredCard__copy h1, .featuredCard:focus-within .featuredCard__copy h2, .featuredCard:focus-within .featuredCard__copy .cardAuthor { color: var(--ink); } .featuredCard:hover .featuredCard__image img, .featuredCard:focus-within .featuredCard__image img { transform: scale(1.025); } .cardAuthor { align-self: start; display: grid; gap: 5px; min-width: 62px; overflow-wrap: anywhere; font-size: 12px; font-weight: 700; line-height: 1.1; } .cardAuthor > span { font-size: 14px; font-weight: 950; letter-spacing: -.09em; } .cardAuthor small { font-size: 11px; } .cardAuthor b { display: block; font-weight: 950; } .leadGrid__rail { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 31px; } .leadGrid__rail--single { grid-template-rows: auto; } .leadGrid--count-1 { grid-template-columns: minmax(0, 1fr); } .leadGrid--count-1 .featuredCard--main { max-width: 980px; } .headerStudy--count-0, .headerStudy--count-1 { min-height: 0; } .afterLead { display: grid; grid-template-columns: minmax(0, 2fr) minmax(330px, .92fr); gap: 66px; align-items: start; padding: 76px 0 52px; } .afterLead__stories { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .storyCard { display: grid; grid-template-rows: auto 1fr; min-width: 0; height: 100%; } .storyCard__media { position: relative; display: block; aspect-ratio: 16 / 9.6; overflow: hidden; background: #d8dbd3; } .storyCard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .storyCard__media > span { position: absolute; top: 0; right: 0; padding: 5px 7px 4px; background: var(--lime); color: var(--ink); font-size: 11px; font-weight: 900; } .storyCard__copy { display: grid; grid-template-columns: minmax(0, 1fr) 62px; gap: 14px; align-content: start; align-items: start; min-height: 132px; padding: 15px 15px 13px; background: var(--lime); color: var(--ink); transition: background .2s ease, color .2s ease; } .storyCard__title { display: block; min-width: 0; } .storyCard__copy h2 { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.03; letter-spacing: -.04em; } .storyCard:hover .storyCard__copy, .storyCard:focus-within .storyCard__copy { background: var(--ink); color: var(--lime); } .storyCard:hover .storyCard__media img, .storyCard:focus-within .storyCard__media img { transform: scale(1.025); } .newsletter { padding: 28px 30px 24px; background: var(--lime); color: var(--ink); } .newsletter h2 { margin: 0 0 10px; font-size: 31px; line-height: .95; letter-spacing: -.055em; } .newsletter p { margin: 0 0 18px; max-width: 360px; font-size: 13px; line-height: 1.25; } .newsletter input[type="text"], .newsletter input[type="email"] { width: 100%; min-height: 44px; border: 2px solid var(--ink); border-radius: 0; background: transparent; padding: 10px 11px; color: var(--ink); font-size: 14px; outline: none; } .newsletter input::placeholder { color: var(--ink); opacity: .85; } .newsletter input:focus { background: var(--paper); } .newsletter__names { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 9px; } .newsletter > label { display: block; margin-bottom: 9px; } .newsletter__consent { display: flex !important; align-items: flex-start; gap: 8px; margin: 0 0 14px !important; font-size: 12px; line-height: 1.35; } .newsletter__consent input { width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--ink); } .newsletter__consent a { text-decoration: underline; text-underline-offset: 2px; } .newsletter button { width: 100%; min-height: 44px; border: 0; background: var(--ink); color: var(--lime); font-size: 12px; font-weight: 900; text-transform: uppercase; cursor: pointer; } .newsletter__trap { position: absolute !important; left: -9999px; } .newsletter__status { min-height: 18px; margin: 10px 0 0 !important; font-size: 12px !important; font-weight: 800; } .newsletter button:hover, .newsletter button:focus-visible { background: #000; color: #fff; } .contentLayout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(330px, .92fr); gap: 66px; align-items: start; padding-bottom: 110px; } .sectionStack { min-width: 0; } .newsSection { padding: 0 0 58px; } .sectionHeading { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 22px; border-bottom: 1px solid #d5d6d2; padding-bottom: 8px; } .sectionHeading h2 { margin: 0; font-size: 27px; font-weight: 400; letter-spacing: -.045em; } .sectionHeading h2 span { margin-left: 4px; background: var(--lime); padding: 0 5px 1px; font-weight: 700; } .sectionHeading > a { border-bottom: 1px solid currentColor; font-size: 10px; font-weight: 700; } .storyGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; } .storyGrid .storyCard__copy { min-height: 145px; } .storyGrid .storyCard__copy h2 { font-size: 18px; } .trending { position: sticky; top: 151px; } .trending > h2 { display: inline-block; margin: 0 0 10px; padding: 2px 7px 3px; background: var(--lime); font-size: 24px; line-height: 1; letter-spacing: -.045em; } .trending__list { border-top: 1px solid #9b9e97; } .trendItem { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 15px; padding: 17px 0; border-bottom: 1px solid #9b9e97; } .trendItem__image { position: relative; display: block; aspect-ratio: 16 / 9.5; overflow: hidden; background: #d8dbd3; } .trendItem__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .trendItem h3 { margin: 0 0 8px; font-size: 15px; line-height: 1.05; letter-spacing: -.03em; } .trendItem span { display: inline-block; background: var(--lime); padding: 3px 5px; font-size: 11px; font-weight: 800; } .trendItem:hover img { transform: scale(1.035); } .siteFooter { position: relative; min-height: 280px; overflow: hidden; background: transparent; color: var(--ink); isolation: isolate; } .siteFooter::before { content: ""; position: absolute; inset: 0 0 0 auto; z-index: 0; width: 50%; background: var(--ink); clip-path: polygon(0 41%, 100% 0, 100% 100%, 0 100%); } .siteFooter__shape { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; background: var(--lime); clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 100%); } .siteFooter__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 44px; align-items: start; min-height: 280px; padding: 70px 0 24px; } .footerBrand { display: flex; align-items: center; line-height: .75; } .footerBrand__logo { display: block; width: 145px; height: auto; } .footerBrand__mark { font-size: 44px; font-weight: 950; letter-spacing: -.14em; } .footerBrand__name { font-size: 9px; font-weight: 950; letter-spacing: -.06em; } .socials { display: flex; gap: 10px; margin-top: 16px; font-size: 14px; font-weight: 900; } .socials a, .socials span { display: grid; place-items: center; min-width: 32px; min-height: 32px; } .socials span { opacity: .58; } .footerLinks { align-self: start; padding: 60px 0 42px; } .footerLinks ul { display: grid; grid-template-columns: repeat(5, minmax(112px, 1fr)); gap: 12px 20px; margin: 0; padding: 0; list-style: none; } .footerLinks a { font-size: 12px; font-weight: 800; text-transform: uppercase; } .footerLinks a:hover, .footerLinks a:focus-visible { text-decoration: underline; } .copyright { position: absolute; right: 0; bottom: 20px; margin: 0; font-size: 12px; } @media (min-width: 1400px) { .siteFooter__shape { clip-path: polygon(0 0, 100% 50%, 100% 100%, 0 100%); } } @media (max-width: 1100px) { :root { --frame: min(960px, calc(100vw - 36px)); } .leadGrid { gap: 28px; grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr); } .brand__monogram { height: 52px; } .brand__monogram i { width: 46px; font-size: 32px; } .brand__name { font-size: 14px; } .nav__inner { gap: 18px; } .nav a { font-size: 12px; } .afterLead, .contentLayout { gap: 34px; grid-template-columns: minmax(0, 1.9fr) minmax(285px, .9fr); } .storyGrid { gap: 16px; } .storyCard__copy h3 { font-size: 16px; } .trendItem { grid-template-columns: 108px minmax(0, 1fr); } .footerLinks ul { grid-template-columns: repeat(4, minmax(105px, 1fr)); gap-inline: 16px; } } @media (max-width: 999px) { .afterLead, .contentLayout { grid-template-columns: 1fr; gap: 34px; } .leadGrid, .categoryLead { grid-template-columns: 1fr; gap: 24px; } .leadGrid { width: 100%; } .leadGrid__rail, .categoryLead__rail { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 20px; padding-inline: 14px; } .categoryLead__rail { padding-inline: 0; } .trending { position: static; } .trending__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; } .siteFooter { min-height: 0; background: var(--lime); } .siteFooter::before, .siteFooter__shape { display: none; } .siteFooter__inner { min-height: 0; padding: 38px 0 28px; } .footerLinks { padding-top: 0; } } @media (max-width: 820px) { :root { --frame: calc(100% - 28px); } .siteHeader { position: sticky; } .utility { height: 28px; font-size: 9px; } .utility__updates { display: none; } .utility__inner { justify-content: center; } .masthead__top { min-height: 66px; display: grid; grid-template-columns: 42px 1fr auto; } .menuButton { display: block; } .brand { justify-self: center; } .brandLogo { width: 145px; max-height: 58px; } .brand__monogram { height: 42px; } .brand__monogram i { width: 34px; font-size: 24px; } .brand__name { display: none; } .masthead__tools { align-self: center; padding: 0; gap: 7px; } .masthead__tools .search { font-size: 0; } .masthead__tools .search::first-letter { font-size: 16px; } .toolLink { display: none; } .nav { display: none; border-top: 1px solid rgb(23 25 22 / 20%); } .nav--open { display: block; } .nav__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; padding-block: 8px 14px; } .nav a { padding: 11px 2px; border-bottom: 1px solid rgb(23 25 22 / 22%); font-size: 13px; } .headerStudy { min-height: 0; padding-bottom: 56px; } .leadGrid { width: 100%; grid-template-columns: 1fr; gap: 20px; } .featuredCard__image--main { aspect-ratio: 4 / 3; } .featuredCard__copy--main { margin: 0 14px; padding: 18px; } .featuredCard__copy h1 { font-size: clamp(33px, 8.8vw, 49px); } .leadGrid__rail { grid-template-columns: 1fr 1fr; gap: 18px; padding-inline: 14px; } .leadGrid__rail { grid-template-rows: auto; } .featuredCard__copy { grid-template-columns: minmax(0, 1fr); gap: 15px; } .leadAuthor { grid-template-columns: 34px 1fr; align-items: end; } .headerStudy__angle { height: 50px; } .afterLead { grid-template-columns: 1fr; gap: 22px; padding: 38px 0 44px; } .contentLayout { grid-template-columns: 1fr; gap: 20px; padding-bottom: 65px; } .trending { position: static; } .trending__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; } .storyGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .siteFooter__inner { grid-template-columns: 1fr; gap: 24px; align-items: start; min-height: 0; padding: 38px 0 28px; } .footerLinks { padding: 0; } .footerLinks ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px 18px; } .copyright { position: static; grid-column: 1; } } @media (max-width: 560px) { .admin-bar .siteHeader { top: 46px; } .leadGrid__rail { grid-template-columns: 1fr; } .featuredCard__image { aspect-ratio: 16 / 9; } .featuredCard__copy { min-height: 115px; grid-template-columns: minmax(0, 1fr) 55px; } .featuredCard__copy h2 { font-size: 25px; } .afterLead__stories, .storyGrid, .trending__list { grid-template-columns: 1fr; } .newsletter { padding: 24px 20px 20px; } .newsletter__names { grid-template-columns: 1fr; } .newsSection { padding-bottom: 45px; } .sectionHeading h2 { font-size: 22px; } .storyGrid .storyCard__copy { min-height: 115px; } .storyGrid .storyCard__copy h3 { font-size: 21px; } .trendItem { grid-template-columns: 120px minmax(0, 1fr); } .footerLinks ul { grid-template-columns: 1fr 1fr; } } /* Figma 31:5400 — desktop-only Factelle help form */ .helpBeacon { position: fixed; right: 24px; bottom: 22px; z-index: 280; display: none; width: 320px; color: #526273; font-family: Arial, Helvetica, sans-serif; } .helpBeacon__panel { overflow-x: hidden; overflow-y: auto; max-height: calc(100vh - 88px); margin-bottom: 14px; border-radius: 10px; background: #f5f6f6; box-shadow: 0 18px 52px rgb(0 0 0 / 28%); } .helpBeacon__panel[hidden] { display: none; } .helpBeacon__heading { min-height: 126px; padding: 16px 24px 20px; background: var(--lime); color: var(--ink); text-align: center; } .helpBeacon__heading p { margin: 0 0 18px; font-size: 12px; line-height: 1.2; } .helpBeacon__heading h2 { margin: 0 0 3px; font-size: 18px; font-weight: 800; line-height: 1.1; letter-spacing: -.025em; } .helpBeacon__heading span { display: block; font-size: 12px; line-height: 1.3; opacity: .65; } .helpBeacon__form { padding: 18px 23px 8px; } .helpBeacon__form label { display: block; margin: 0 0 10px; color: #526273; font-size: 12px; font-weight: 400; line-height: 1.25; } .helpBeacon__form input, .helpBeacon__form textarea { display: block; width: 100%; margin-top: 5px; border: 1px solid #b7c3cd; border-radius: 2px; padding: 8px 10px; background: #fff; color: #28333e; font: inherit; font-size: 14px; outline: 0; } .helpBeacon__form input { min-height: 34px; } .helpBeacon__form textarea { min-height: 74px; resize: vertical; } .helpBeacon__form input:focus, .helpBeacon__form textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 2px color-mix(in srgb, var(--lime) 75%, transparent); } .helpBeacon__form button { width: 100%; min-height: 42px; margin-top: 0; border: 0; border-radius: 2px; padding: 10px 16px; background: var(--lime); color: var(--ink); font-size: 12px; font-weight: 800; cursor: pointer; } .helpBeacon__form button:hover, .helpBeacon__form button:focus-visible { background: var(--ink); color: var(--lime); } .helpBeacon__form button:disabled { cursor: wait; opacity: .65; } .helpBeacon__trap { position: absolute !important; left: -10000px !important; } .helpBeacon__status { min-height: 17px; margin: 8px 0 0; color: var(--ink); font-size: 11px; font-weight: 700; line-height: 1.3; text-align: center; } .helpBeacon__powered { margin: 0; padding: 0 23px 14px; color: #697581; font-size: 10px; line-height: 1; text-align: center; } .helpBeacon__powered strong { display: inline-block; margin-left: 2px; background: var(--lime); color: var(--ink); padding: 2px 4px; font-weight: 900; } .helpBeacon__toggle { display: flex; align-items: center; justify-content: center; gap: 11px; width: max-content; min-width: 92px; min-height: 50px; margin-left: auto; border: 0; border-radius: 24px; padding: 10px 18px; background: var(--lime); color: var(--ink); box-shadow: 0 10px 28px rgb(0 0 0 / 20%); font-size: 13px; cursor: pointer; } .helpBeacon__toggle:hover, .helpBeacon__toggle:focus-visible { background: var(--ink); color: var(--lime); } .helpBeacon__chevron { width: 11px; height: 11px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease; } .helpBeacon__toggle[aria-expanded="true"] .helpBeacon__chevron { transform: rotate(225deg) translate(-1px, -1px); } @media (min-width: 1025px) { .helpBeacon { display: block; } } @media (prefers-reduced-motion: reduce) { .helpBeacon__chevron { transition: none; } } /* Figma standards and policy template — node 26:4944. */ .page .infoPage:not(.infoPage--elementor) { min-height: 70vh; overflow: clip; background: var(--paper); } .page .infoPage:not(.infoPage--elementor) .infoPage__hero { min-height: 211px; padding: 48.5px 0 35px; border-bottom: 1px solid #b9bbb7; background: var(--paper); } .page .infoPage:not(.infoPage--elementor) .infoPage__heroInner { max-width: none; } .page .infoPage:not(.infoPage--elementor) .infoPage__hero .eyebrow { margin: 0 0 13.5px; padding: 4px 7px 3px; font-size: 12px; line-height: 19.8px; letter-spacing: .03em; } .page .infoPage:not(.infoPage--elementor) .infoPage__hero h1 { max-width: 940px; margin: 0; font-size: 78px; font-weight: 800; line-height: .9; letter-spacing: -.065em; } .page .infoPage:not(.infoPage--elementor) .infoPage__hero h1 + p { max-width: 856.5px; margin: 17px 0 0; font-size: 15.668px; line-height: 1.62; } .page .infoPage:not(.infoPage--elementor) .infoPage__layout { display: grid; grid-template-columns: minmax(0, 856.51px) minmax(0, 313.36px); gap: 83.56px; align-items: start; padding: 50px 0 104px; } .page .infoPage:not(.infoPage--elementor) .infoArticle { min-width: 0; font-size: 15.668px; line-height: 25.382px; } .page .infoPage:not(.infoPage--elementor) .infoArticle > :first-child { margin-top: 0; } .page .infoPage:not(.infoPage--elementor) .infoArticle h2 { width: fit-content; max-width: 100%; margin: 15.668px 0 17.757px; padding: 3.134px 6.267px; background: var(--lime); font-size: 24.024px; font-weight: 800; line-height: 26.427px; letter-spacing: -.04em; overflow-wrap: anywhere; } .page .infoPage:not(.infoPage--elementor) .infoArticle h3 { margin: 22px 0 10px; font-size: 19px; line-height: 1.2; } .page .infoPage:not(.infoPage--elementor) .infoArticle p, .page .infoPage:not(.infoPage--elementor) .infoArticle li { font-size: 15.668px; line-height: 25.382px; } .page .infoPage:not(.infoPage--elementor) .infoArticle p { margin: 0 0 15.668px; } .page .infoPage:not(.infoPage--elementor) .infoArticle ul, .page .infoPage:not(.infoPage--elementor) .infoArticle ol { margin: 0 0 15.668px; padding-left: 24px; } .page .infoPage:not(.infoPage--elementor) .infoArticle li { margin-bottom: 7px; } .page .infoPage:not(.infoPage--elementor) .infoArticle a { font-weight: 750; text-decoration: underline; text-underline-offset: .15em; } .page .infoPage:not(.infoPage--elementor) .trustNav { position: sticky; top: 150px; width: 100%; margin-top: 10.58px; border-top: 8.356px solid var(--lime); padding: 22.98px 22.98px 20.891px; background: var(--ink); color: var(--paper); } .page .infoPage:not(.infoPage--elementor) .trustNav h2 { margin: 0 0 14.623px; color: var(--lime); font-size: 21.935px; line-height: 23.032px; letter-spacing: -.04em; } .page .infoPage:not(.infoPage--elementor) .trustNav a { display: block; margin: 0; border-top: 1.045px solid rgb(255 255 255 / 22%); padding: 10.445px 0 9.401px; color: var(--paper); font-size: 12.534px; font-weight: 750; line-height: 20.682px; } .page .infoPage:not(.infoPage--elementor) .trustNav a:hover, .page .infoPage:not(.infoPage--elementor) .trustNav a:focus-visible, .page .infoPage:not(.infoPage--elementor) .trustNav a[aria-current="page"] { color: var(--lime); } @media (max-width: 1280px) { .page .infoPage:not(.infoPage--elementor) .infoPage__hero h1 { font-size: clamp(58px, 6.1vw, 78px); } .page .infoPage:not(.infoPage--elementor) .infoPage__layout { grid-template-columns: minmax(0, 1fr) 290px; gap: 52px; } } @media (max-width: 999px) { .page .infoPage:not(.infoPage--elementor) .infoPage__hero { min-height: 0; padding: 40px 0 32px; } .page .infoPage:not(.infoPage--elementor) .infoPage__hero h1 { font-size: clamp(48px, 8vw, 68px); } .page .infoPage:not(.infoPage--elementor) .infoPage__layout { grid-template-columns: 1fr; gap: 44px; padding: 42px 0 76px; } .page .infoPage:not(.infoPage--elementor) .trustNav { position: static; order: initial; margin-top: 0; } .page .infoPage:not(.infoPage--elementor) .trustNav a { display: block; margin: 0; border-top: 1px solid rgb(255 255 255 / 22%); border-bottom: 0; } } @media (max-width: 560px) { .page .infoPage:not(.infoPage--elementor) .infoPage__hero { padding: 31px 0 27px; } .page .infoPage:not(.infoPage--elementor) .infoPage__hero .eyebrow { margin-bottom: 10px; font-size: 11px; } .page .infoPage:not(.infoPage--elementor) .infoPage__hero h1 { font-size: clamp(40px, 13vw, 56px); line-height: .94; } .page .infoPage:not(.infoPage--elementor) .infoPage__layout { gap: 36px; padding: 34px 0 58px; } .page .infoPage:not(.infoPage--elementor) .infoArticle h2 { font-size: 21px; line-height: 1.16; } .page .infoPage:not(.infoPage--elementor) .infoArticle p, .page .infoPage:not(.infoPage--elementor) .infoArticle li { font-size: 16px; line-height: 1.62; } .page .infoPage:not(.infoPage--elementor) .trustNav { padding: 20px 18px 17px; } } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } } /* Information, trust and policy pages */ .infoPage { min-height: 70vh; background: var(--paper); } .infoPage__hero { border-bottom: 1px solid #d8dad5; padding: 62px 0 46px; background: var(--paper); } .infoPage__heroInner { max-width: 1040px; } .infoPage__eyebrow { display: inline-block; margin: 0 0 14px !important; padding: 4px 7px 3px; background: var(--lime); color: var(--ink); font-size: 11px !important; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; } .infoPage__hero h1 { max-width: 900px; margin: 0 0 18px; font-size: clamp(46px, 6vw, 78px); font-weight: 800; line-height: .9; letter-spacing: -.065em; } .infoPage__hero h1 + p { max-width: 780px; margin: 0 0 16px; font-size: 18px; line-height: 1.42; } .infoPage__hero span { font-size: 11px; font-weight: 750; } .infoPage__layout { display: grid; grid-template-columns: minmax(0, 820px) minmax(245px, 1fr); gap: 80px; align-items: start; padding: 58px 0 105px; } .infoArticle { min-width: 0; } .infoArticle section { margin: 0 0 42px; } .infoArticle h2 { margin: 0 0 17px; font-size: 23px; font-weight: 800; line-height: 1.1; letter-spacing: -.04em; } .infoArticle h2 span { box-decoration-break: clone; -webkit-box-decoration-break: clone; background: var(--lime); padding: 2px 5px 3px; } .infoArticle p, .infoArticle li { font-size: 15px; line-height: 1.62; } .infoArticle p { margin: 0 0 15px; } .infoArticle ul { margin: 8px 0 0; padding-left: 24px; } .infoArticle li { margin: 0 0 9px; padding-left: 4px; } .infoArticle p a { border-bottom: 1px solid currentColor; font-weight: 750; } .trustNav { position: sticky; top: 170px; border-top: 8px solid var(--lime); padding: 22px 22px 20px; background: var(--ink); color: var(--paper); } .trustNav h2 { margin: 0 0 14px; color: var(--lime); font-size: 21px; letter-spacing: -.04em; } .trustNav a { display: block; border-top: 1px solid rgb(255 255 255 / 22%); padding: 10px 0 9px; font-size: 12px; font-weight: 750; } .trustNav a:hover, .trustNav a:focus-visible { color: var(--lime); } .infoCta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 54px; border-top: 1px solid #cfd1cc; padding-top: 26px; } .infoCta a { display: inline-block; padding: 12px 17px 11px; background: var(--ink); color: var(--lime); font-size: 12px; font-weight: 900; text-transform: uppercase; } .infoCta a:hover, .infoCta a:focus-visible { background: var(--lime); color: var(--ink); } .infoCta span { font-size: 12px; } .cookiePanel { margin: 0 0 46px; border: 2px solid var(--ink); } .cookieRow { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 82px; border-bottom: 1px solid #cfd1cc; padding: 15px 18px; cursor: pointer; } .cookieRow:last-of-type { border-bottom: 0; } .cookieRow b { display: block; margin-bottom: 3px; font-size: 15px; } .cookieRow p { margin: 0; font-size: 12px; line-height: 1.35; } .cookieRow span { padding: 4px 7px; background: var(--lime); font-size: 10px; font-weight: 900; white-space: nowrap; } .cookieRow input { width: 22px; height: 22px; accent-color: var(--ink); } .cookieActions { display: flex; justify-content: flex-end; gap: 10px; border-top: 2px solid var(--ink); padding: 14px 16px; background: #f1f2ee; } .cookieActions button { border: 2px solid var(--ink); padding: 10px 13px 9px; background: var(--paper); font-size: 11px; font-weight: 900; text-transform: uppercase; cursor: pointer; } .cookieActions__primary { background: var(--ink) !important; color: var(--lime); } .cookieSaved { margin: 0 !important; border-top: 1px solid var(--ink); padding: 12px 16px; background: var(--lime); font-size: 11px !important; font-weight: 800; } @media (max-width: 820px) { .infoPage__hero { padding: 42px 0 34px; } .infoPage__hero h1 { font-size: clamp(42px, 12vw, 68px); } .infoPage__hero h1 + p { font-size: 16px; } .infoPage__layout { grid-template-columns: 1fr; gap: 30px; padding: 42px 0 70px; } .trustNav { position: static; order: -1; } .trustNav a { display: inline-block; margin-right: 15px; border-top: 0; border-bottom: 1px solid rgb(255 255 255 / 25%); } } @media (max-width: 560px) { .infoPage__hero h1 { font-size: 42px; } .infoArticle h2 { font-size: 20px; } .infoArticle p, .infoArticle li { font-size: 14px; } .cookieRow { min-height: 76px; padding: 13px; } .cookieActions { display: grid; grid-template-columns: 1fr 1fr; } .cookieActions button { padding-inline: 8px; } } /* Category archive */ .categoryPage { background: var(--paper); } .categoryHero { position: relative; min-height: 0; overflow: hidden; padding: 43px 0 82px; background: var(--ink); color: var(--paper); } .categoryHero__angle { position: absolute; inset: auto 0 0; height: 112px; background: var(--paper); clip-path: polygon(0 74%, 100% 36%, 100% 100%, 0 100%); } .categoryHero__inner { position: relative; z-index: 1; } .categoryTitle { display: flex; align-items: baseline; gap: 20px; margin-bottom: 29px; } .categoryTitle h1 { display: inline-flex; align-items: center; margin: 0; padding: 4px 10px 5px; background: var(--lime); color: var(--ink); font-size: 34px; font-weight: 850; line-height: .9; letter-spacing: -.06em; } .categoryTitle p { margin: 0; color: var(--paper); font-size: 13px; font-weight: 750; letter-spacing: -.02em; } .categoryLead { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(320px, 1fr); gap: 66px; align-items: start; } .categoryLead__main, .categoryLead__side { display: grid; grid-template-rows: auto 1fr; min-width: 0; } .categoryLead__media { position: relative; display: block; overflow: hidden; background: #9fa59b; } .categoryLead__main .categoryLead__media { aspect-ratio: 16 / 8.55; } .categoryLead__side .categoryLead__media { aspect-ratio: 16 / 8.25; } .categoryLead__media img { object-fit: cover; transition: transform .4s ease; } .categoryLead__media > span { position: absolute; top: 0; right: 0; z-index: 2; padding: 6px 8px 5px; background: var(--lime); color: var(--ink); font-size: 9px; font-weight: 900; } .categoryLead__copy { display: grid; grid-template-columns: minmax(0, 1fr) 65px; gap: 20px; align-items: start; min-height: 107px; padding: 17px 21px 16px; background: var(--lime); color: var(--ink); transition: background .2s ease, color .2s ease; } .categoryLead__title { display: block; min-width: 0; } .categoryLead__main .categoryLead__copy { min-height: 108px; padding: 19px 24px 18px; } .categoryLead__copy h2 { margin: 0; max-width: 820px; font-size: 25px; font-weight: 500; line-height: 1.02; letter-spacing: -.045em; } .categoryLead__main .categoryLead__copy h2 { font-size: clamp(25px, 2vw, 30px); line-height: 1.05; } .categoryLead__rail { display: grid; gap: 28px; } .categoryLead__side .categoryLead__copy { min-height: 96px; padding: 14px 16px; } .categoryLead__side .categoryLead__copy h2 { font-size: 20px; } .categoryLead__main:hover .categoryLead__copy, .categoryLead__main:focus-within .categoryLead__copy, .categoryLead__side:hover .categoryLead__copy, .categoryLead__side:focus-within .categoryLead__copy { background: #050505; color: var(--lime); } .categoryLead__main:hover .categoryLead__media img, .categoryLead__main:focus-within .categoryLead__media img, .categoryLead__side:hover .categoryLead__media img, .categoryLead__side:focus-within .categoryLead__media img { transform: scale(1.025); } .categoryAuthor { align-self: start; display: grid; gap: 5px; font-size: 9px; font-weight: 900; line-height: 1; } .categoryAuthor > span { font-size: 13px; font-weight: 950; letter-spacing: -.09em; } .categoryAuthor small { font-size: 8px; font-weight: 700; line-height: 1.08; } .categoryAuthor b { display: block; font-weight: 950; } .categoryBody { padding: 84px 0 108px; } .categoryGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; } .categoryGrid--opening { margin-bottom: 47px; } .categoryGrid--mini { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 42px 20px; margin-bottom: 67px; } .categoryCard { min-width: 0; } .categoryCard__media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9.35; background: #d1d5ce; } .categoryCard__media img { object-fit: cover; transition: transform .35s ease; } .categoryCard__media > span { position: absolute; top: 0; right: 0; z-index: 2; padding: 5px 7px 4px; background: var(--lime); color: var(--ink); font-size: 8px; font-weight: 900; } .categoryCard__copy { display: grid; grid-template-columns: minmax(0, 1fr) 54px; gap: 12px; align-items: start; min-height: 121px; padding: 14px 14px 13px; background: var(--lime); color: var(--ink); transition: background .2s ease, color .2s ease; } .categoryCard__copy h2 { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.04; letter-spacing: -.04em; } .categoryCard:hover .categoryCard__copy, .categoryCard:focus-within .categoryCard__copy { background: var(--ink); color: var(--lime); } .categoryCard:hover .categoryCard__media img, .categoryCard:focus-within .categoryCard__media img { transform: scale(1.025); } .categoryCard--mini .categoryCard__copy { display: block; min-height: 115px; padding: 12px 12px 14px; } .categoryCard--mini .categoryCard__copy h2 { font-size: 15px; } .categoryCard--mini .categoryAuthor { margin-top: 11px; grid-template-columns: 27px minmax(0, 1fr); align-items: end; } .categoryCard--mini .categoryAuthor > span { font-size: 10px; } .categoryLower { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, .78fr); gap: 66px; align-items: start; } .categoryLower--no-feed { grid-template-columns: 1fr; } .categoryLower--no-feed .categoryLower__feed { display: none; } .categoryLower--no-feed .categorySidebar { grid-template-columns: minmax(0, 1.6fr) minmax(300px, .8fr); align-items: start; } .categoryLower__feed { min-width: 0; } .categoryGrid--feature { grid-template-columns: 1fr 1fr; margin-bottom: 48px; } .categoryGrid--feature .categoryCard__copy { min-height: 126px; } .categoryGrid--feature .categoryCard__copy h2 { font-size: 21px; } .categoryGrid--last { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 72px; } .categorySidebar { display: grid; gap: 36px; } .categoryTrending > h2 { display: inline-block; margin: 0 0 16px; padding: 3px 7px 4px; background: var(--lime); color: var(--ink); font-size: 27px; font-weight: 850; line-height: .95; letter-spacing: -.05em; } .categoryTrend { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 15px; align-items: center; padding: 18px 0; border-top: 1px solid #92968f; } .categoryTrend:last-child { border-bottom: 1px solid #92968f; } .categoryTrend__media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9.35; background: #d1d5ce; } .categoryTrend__media img { object-fit: cover; transition: transform .3s ease; } .categoryTrend h3 { margin: 0 0 8px; font-size: 14px; font-weight: 750; line-height: 1.08; letter-spacing: -.025em; } .categoryTrend span { display: inline-block; padding: 2px 4px; background: var(--lime); color: var(--ink); font-size: 7px; } .categoryTrend:hover img, .categoryTrend:focus-within img { transform: scale(1.035); } .categoryNewsletter { margin-top: 4px; padding: 24px 23px 21px; } .categoryNewsletter h2 { font-size: 29px; } .loadMore { display: block; margin: 0 auto; border: 1px solid var(--ink); border-radius: 0; padding: 8px 24px 7px; background: var(--paper); color: var(--ink); font-size: 10px; font-weight: 800; cursor: pointer; } .loadMore:hover, .loadMore:focus-visible { background: var(--ink); color: var(--lime); } @media (max-width: 1100px) { .categoryLead { gap: 30px; grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr); } .categoryHero { min-height: 0; } .categoryLead__copy h2 { font-size: 20px; } .categoryLead__main .categoryLead__copy h2 { font-size: 28px; } .categoryLead__side .categoryLead__copy h2 { font-size: 17px; } .categoryBody { padding-top: 66px; } .categoryGrid { gap: 30px 18px; } .categoryGrid--mini { gap: 32px 16px; } .categoryCard__copy h2 { font-size: 16px; } .categoryCard--mini .categoryCard__copy h2 { font-size: 13px; } .categoryLower { grid-template-columns: minmax(0, 1.9fr) minmax(275px, .85fr); gap: 34px; } .categoryTrend { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; } } @media (max-width: 820px) { .categoryHero { min-height: 0; padding: 32px 0 60px; } .categoryHero__angle { height: 60px; } .categoryTitle { align-items: flex-start; flex-direction: column; gap: 10px; } .categoryTitle p { font-size: 11px; } .categoryLead { grid-template-columns: 1fr; gap: 22px; } .categoryLead__main .categoryLead__copy h2 { font-size: 28px; } .categoryLead__main .categoryLead__media { aspect-ratio: 4 / 3; } .categoryLead__main .categoryLead__copy { margin: 0 14px; } .categoryLead__rail { grid-template-columns: 1fr 1fr; gap: 18px; } .categoryBody { padding: 48px 0 70px; } .categoryGrid--opening { grid-template-columns: repeat(3, minmax(0, 1fr)); } .categoryGrid--mini { grid-template-columns: repeat(4, minmax(0, 1fr)); } .categoryCard__copy { grid-template-columns: 1fr; min-height: 115px; } .categoryAuthor { grid-template-columns: 30px 1fr; align-items: end; } .categoryLower { grid-template-columns: 1fr; gap: 52px; } .categorySidebar { grid-template-columns: 1fr 1fr; align-items: start; } .categoryLower--no-feed .categorySidebar { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .categoryTitle h1 { font-size: 29px; } .categoryLead__rail { grid-template-columns: 1fr; } .categoryLead__copy, .categoryLead__main .categoryLead__copy { margin-inline: 0; min-height: 108px; padding: 16px; } .categoryLead__main .categoryLead__copy h2 { font-size: 27px; } .categoryLead__side .categoryLead__copy h2 { font-size: 22px; } .categoryGrid--opening, .categoryGrid--mini, .categoryGrid--feature, .categoryGrid--last { grid-template-columns: 1fr; gap: 22px; } .categoryGrid--opening, .categoryGrid--mini, .categoryGrid--feature { margin-bottom: 42px; } .categoryCard__copy, .categoryCard--mini .categoryCard__copy { min-height: 104px; } .categoryCard__copy h2, .categoryCard--mini .categoryCard__copy h2, .categoryGrid--feature .categoryCard__copy h2 { font-size: 21px; } .categorySidebar { grid-template-columns: 1fr; } .categoryLower--no-feed .categorySidebar { grid-template-columns: 1fr; } .categoryTrend { grid-template-columns: 115px minmax(0, 1fr); } } /* Article page */ .articlePage { background: var(--paper); } .articleFeature { position: relative; overflow: hidden; background: var(--lime); padding: 38px 0 58px; } .articleFeature__inner { position: relative; z-index: 2; } .articleFeature__media { position: relative; aspect-ratio: 16 / 8.35; overflow: hidden; background: #a7aea0; } .articleFeature__media img { object-fit: cover; } .articleFeature__title { position: absolute; top: -38px; left: 8%; width: min(82%, 1040px); padding: 23px 36px 25px; background: var(--ink); color: var(--lime); } .articleFeature__title > span { display: inline-block; margin-bottom: 8px; font-size: 11px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; } .articleFeature__title h1 { margin: 0; max-width: 930px; font-size: clamp(38px, 4vw, 60px); font-weight: 500; line-height: .98; letter-spacing: -.055em; } .articleFeature__angle { position: absolute; inset: auto 0 0; height: 185px; z-index: 1; background: var(--paper); clip-path: polygon(0 78%, 100% 26%, 100% 100%, 0 100%); } .articleMetaBar { position: relative; z-index: 5; display: grid; grid-template-columns: minmax(230px, 1.45fr) .8fr .75fr auto; align-items: center; min-height: 55px; margin-top: -76px; margin-bottom: 48px; border: 6px solid var(--paper); background: var(--lime); color: var(--ink); font-size: 11px; font-weight: 800; } .articleMetaBar > * { min-height: 43px; display: flex; align-items: center; padding: 7px 17px; border-right: 1px solid rgb(23 25 22 / 24%); } .articleMetaBar > *:last-child { border: 0; } .articleByline { gap: 10px; } .articleByline__avatar { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--ink); color: var(--lime); font-size: 9px; font-weight: 950; letter-spacing: -.08em; } .articleByline a { border-bottom: 1px solid currentColor; font-weight: 950; } .articleByline small { display: block; margin-top: 2px; font-size: 8px; font-weight: 600; } .articleShare { gap: 10px; justify-content: flex-end; } .articleShare a { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--lime); font-size: 10px; font-weight: 900; } .articleShare a:hover, .articleShare a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .articleColumns { display: grid; grid-template-columns: minmax(0, 2.08fr) minmax(300px, .78fr); gap: 62px; align-items: start; padding-bottom: 90px; } .articleContent { max-width: 850px; font-family: Georgia, "Times New Roman", serif; font-size: 18px; line-height: 1.67; color: #1d211c; } .articleContent [id], .relatedArticles [id] { scroll-margin-top: 175px; } .articleContent p { margin: 0 0 23px; } .articleContent .articleStandfirst { margin-bottom: 28px; font-family: Arial, Helvetica, sans-serif; font-size: 19px; font-weight: 800; line-height: 1.35; letter-spacing: -.025em; } .articleContent h2 { width: fit-content; margin: 42px 0 16px; padding: 2px 6px 3px; background: var(--lime); color: var(--ink); font-family: Arial, Helvetica, sans-serif; font-size: 25px; font-weight: 850; line-height: 1.08; letter-spacing: -.04em; } .articleContent h3 { margin: 32px 0 10px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; line-height: 1.15; letter-spacing: -.025em; } .articleContent blockquote { margin: 35px 0; border-left: 8px solid var(--lime); padding: 8px 0 8px 25px; color: var(--ink); font-size: 27px; font-weight: 700; line-height: 1.25; letter-spacing: -.035em; } .listenButton { display: inline-flex; align-items: center; gap: 9px; min-height: 30px; margin: 0 0 24px; border: 0; border-radius: 999px; padding: 6px 13px 6px 8px; background: var(--ink); color: var(--lime); font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: 850; cursor: pointer; } .listenButton:hover, .listenButton:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; } .listenButton:disabled { cursor: not-allowed; opacity: .6; } .listenButton__icon { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 8px; line-height: 1; } .keyPoints { margin: 34px 0 44px; border-top: 9px solid var(--lime); padding: 24px 29px 22px; background: var(--ink); color: var(--paper); font-family: Arial, Helvetica, sans-serif; } .articleContent .keyPoints h2 { margin: 0 0 15px; background: transparent; color: var(--lime); padding: 0; font-size: 22px; } .keyPoints ul { display: grid; gap: 8px; margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.4; } .keyPoints li::marker { color: var(--lime); } .articleFaq { margin-top: 54px; font-family: Arial, Helvetica, sans-serif; } .articleFaq details { border-top: 1px solid #aeb2ab; } .articleFaq details:last-child { border-bottom: 1px solid #aeb2ab; } .articleFaq summary { position: relative; padding: 17px 38px 17px 0; font-size: 16px; font-weight: 800; line-height: 1.25; cursor: pointer; list-style: none; } .articleFaq summary::-webkit-details-marker { display: none; } .articleFaq summary::after { content: "+"; position: absolute; top: 11px; right: 5px; color: var(--ink); font-size: 26px; font-weight: 400; } .articleFaq details[open] summary::after { content: "−"; } .articleFaq details p { margin: 0; padding: 0 40px 18px 0; font-family: Georgia, "Times New Roman", serif; font-size: 16px; } .authorNote { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 55px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 24px 0; font-family: Arial, Helvetica, sans-serif; } .authorNote__mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 18px; font-weight: 950; letter-spacing: -.1em; } .articleContent .authorNote h2 { margin: 0 0 7px; padding: 0; background: transparent; font-size: 18px; } .authorNote p { margin: 0; font-size: 13px; line-height: 1.45; } .aiSummary { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 25px; align-items: center; margin-top: 40px; padding: 27px 30px 25px; background: var(--ink); color: var(--paper); font-family: Arial, Helvetica, sans-serif; } .aiSummary::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 7px; background: var(--lime); } .aiSummary__eyebrow { margin: 0 0 2px !important; color: var(--lime); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .articleContent .aiSummary h2 { margin: 0 0 7px; padding: 0; background: transparent; color: var(--paper); font-size: 24px; } .aiSummary > div > p:last-child { margin: 0; max-width: 480px; color: #d9dcd5; font-size: 12px; line-height: 1.35; } .aiSummary__actions { display: flex; gap: 12px; } .aiSummary__button { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid var(--lime); border-radius: 50%; padding: 0; background: transparent; color: var(--lime); font-size: 19px; font-weight: 950; cursor: pointer; } .aiSummary__button--claude { font-size: 11px; letter-spacing: -.04em; } .aiSummary__button:hover, .aiSummary__button:focus-visible { background: var(--lime); color: var(--ink); outline: 0; transform: translateY(-2px); } .aiSummary__button::after { content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 4; width: max-content; max-width: 180px; transform: translate(-50%, 4px); opacity: 0; pointer-events: none; padding: 7px 9px; background: var(--lime); color: var(--ink); font-size: 9px; font-weight: 900; line-height: 1; white-space: nowrap; transition: opacity .15s ease, transform .15s ease; } .aiSummary__button:hover::after, .aiSummary__button:focus-visible::after { opacity: 1; transform: translate(-50%, 0); } .aiSummary__status { grid-column: 1 / -1; min-height: 14px; margin: -8px 0 0 !important; color: var(--lime); font-size: 9px; line-height: 1.2; } .articleSidebar { display: grid; gap: 22px; } .articleNewsletter { padding: 25px 24px 21px; } .articleNewsletter h2 { font-size: 29px; } .articleSidebar__stories { display: grid; gap: 17px; } .sidebarStory { display: block; background: var(--ink); color: var(--lime); } .sidebarStory__image { position: relative; display: block; aspect-ratio: 16 / 9.1; overflow: hidden; background: #d8dbd3; } .sidebarStory__image img { object-fit: cover; transition: transform .35s ease; } .sidebarStory__image b { position: absolute; top: 0; right: 0; padding: 5px 7px; background: var(--lime); color: var(--ink); font-size: 9px; } .sidebarStory > strong { display: block; min-height: 81px; padding: 13px 15px 15px; font-size: 18px; font-weight: 500; line-height: 1.06; letter-spacing: -.035em; } .sidebarStory:hover, .sidebarStory:focus-visible { background: var(--lime); color: var(--ink); } .sidebarStory:hover img, .sidebarStory:focus-visible img { transform: scale(1.025); } .relatedArticles { border-top: 1px solid var(--ink); padding: 33px 0 100px; } .relatedArticles__heading { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 23px; } .relatedArticles__heading h2 { margin: 0; font-size: 29px; font-weight: 500; letter-spacing: -.045em; } .relatedArticles__heading a { border-bottom: 1px solid currentColor; font-size: 10px; font-weight: 800; } .relatedArticles__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 24px; } .relatedCard { display: block; background: var(--lime); color: var(--ink); } .relatedCard__image { position: relative; display: block; aspect-ratio: 16 / 9.7; overflow: hidden; background: #d8dbd3; } .relatedCard__image img { object-fit: cover; transition: transform .35s ease; } .relatedCard__image b { position: absolute; top: 0; right: 0; padding: 5px 7px; background: var(--lime); color: var(--ink); font-size: 8px; } .relatedCard > strong { display: block; min-height: 76px; padding: 12px 13px 14px; font-size: 16px; font-weight: 500; line-height: 1.05; letter-spacing: -.03em; } .relatedCard:hover, .relatedCard:focus-visible { background: var(--ink); color: var(--lime); } .relatedCard:hover img, .relatedCard:focus-visible img { transform: scale(1.025); } @media (max-width: 1100px) { .articleFeature__title { left: 5%; width: 86%; } .articleColumns { gap: 36px; grid-template-columns: minmax(0, 1.9fr) minmax(270px, .75fr); } .articleContent { font-size: 17px; } .articleMetaBar { grid-template-columns: minmax(210px, 1.3fr) .75fr .75fr auto; } .relatedArticles__grid { gap: 22px 18px; } } @media (max-width: 820px) { .articleFeature { padding-top: 0; padding-bottom: 38px; } .articleFeature__inner { width: 100%; } .articleFeature__media { aspect-ratio: 4 / 3; } .articleFeature__title { position: relative; inset: auto; width: calc(100% - 28px); margin: -78px auto 0; padding: 22px 21px 24px; } .articleFeature__title h1 { font-size: clamp(35px, 9vw, 52px); } .articleFeature__angle { height: 45px; } .articleMetaBar { grid-template-columns: 1.2fr .8fr; margin-top: -18px; margin-bottom: 36px; border-width: 4px; } .articleMetaBar > * { border-bottom: 1px solid rgb(23 25 22 / 24%); } .articleMetaBar > *:nth-child(2) { border-right: 0; } .articleShare { justify-content: flex-start; } .articleColumns { grid-template-columns: 1fr; gap: 50px; padding-bottom: 65px; } .articleContent { max-width: 760px; margin-inline: auto; } .articleSidebar { grid-template-columns: 1fr 1fr; gap: 20px; } .articleSidebar__stories { grid-template-columns: 1fr 1fr; gap: 18px; } .relatedArticles__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .articleFeature__title { margin-top: -55px; padding: 18px 17px 20px; } .articleFeature__title h1 { font-size: 33px; } .articleMetaBar { width: calc(100% - 20px); grid-template-columns: 1fr 1fr; font-size: 9px; } .articleMetaBar > * { padding-inline: 10px; } .articleByline { grid-column: 1 / -1; } .articleMetaBar > *:first-child { border-right: 0; } .articleShare { justify-content: flex-end; } .articleColumns { gap: 42px; } .articleContent { font-size: 16px; line-height: 1.62; } .articleContent .articleStandfirst { font-size: 17px; } .articleContent h2 { margin-top: 35px; font-size: 22px; } .articleContent h3 { font-size: 18px; } .articleContent blockquote { margin-inline: 0; padding-left: 18px; font-size: 22px; } .keyPoints { padding: 20px 21px; } .authorNote { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; } .authorNote__mark { width: 50px; height: 50px; font-size: 14px; } .aiSummary { grid-template-columns: 1fr; padding: 25px 23px 22px; } .aiSummary__actions { margin-top: 2px; } .aiSummary__button::after { display: none; } .articleSidebar { grid-template-columns: 1fr; } .articleSidebar__stories { grid-template-columns: 1fr; } .relatedArticles { padding-bottom: 70px; } .relatedArticles__grid { grid-template-columns: 1fr; gap: 19px; } .relatedCard > strong { min-height: 68px; font-size: 18px; } } /* WordPress integration, production controls and audited refinements */ .custom-logo-link { display: block; line-height: 0; } .custom-logo { width: auto; max-width: 285px; max-height: 72px; } .current-menu-item > a, .current_page_item > a, .nav a[aria-current="page"] { border-bottom-color: var(--ink); } .breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; padding-bottom: 14px; color: #4f554d; font-size: 12px; line-height: 1.3; } .breadcrumbs a { border-bottom: 1px solid currentColor; } .breadcrumbs [aria-hidden="true"] { opacity: .45; } .searchPanel { position: fixed; inset: 0; z-index: 250; background: rgb(23 25 22 / 96%); color: #fff; } .searchPanel__inner { position: relative; display: grid; align-content: center; min-height: 100%; max-width: 900px; } .searchPanel__inner > p { margin: 0 0 18px; color: var(--lime); font-size: 18px; font-weight: 900; text-transform: uppercase; } .searchPanel__close { position: absolute; top: 24px; right: 0; width: 48px; height: 48px; border: 2px solid var(--lime); background: transparent; color: var(--lime); font-size: 32px; cursor: pointer; } .searchForm { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; width: 100%; } .searchForm label { display: block; } .searchForm__field { width: 100%; min-height: 52px; border: 2px solid currentColor; border-radius: 0; padding: 12px 14px; background: #fff; color: var(--ink); font-size: 16px; } .searchForm__submit { min-width: 120px; min-height: 52px; border: 2px solid var(--lime); background: var(--lime); color: var(--ink); padding: 10px 18px; font-size: 13px; font-weight: 900; text-transform: uppercase; cursor: pointer; } .searchHeader .searchForm { max-width: 760px; margin-top: 24px; } .searchHeader .searchForm__field { border-color: var(--ink); } .storyCard__copy { display: grid; grid-template-columns: minmax(0, 1fr) 62px; gap: 14px; align-content: start; align-items: start; height: 100%; } .storyCard__copy h2 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .storyCard--mini .storyCard__copy, .storyGrid .storyCard--mini .storyCard__copy, .categoryGrid--feed .storyCard--mini .storyCard__copy { display: block; min-height: 112px; padding: 18px 18px 20px; } .storyCard--mini .storyCard__media { aspect-ratio: 16 / 9; } .storyCard--mini .storyCard__copy h2, .storyGrid .storyCard--mini .storyCard__copy h2 { font-size: 20px; font-weight: 600; line-height: 1.1; } .categoryGrid--feed { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 38px 20px; align-items: stretch; } .categoryGrid--feed .storyCard__copy { min-height: 112px; } .categoryGrid--opening { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; margin-bottom: 48px; align-items: stretch; } .categoryGrid--compact, .categoryGrid--tail { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 42px 20px; align-items: stretch; } .categoryGrid--compact { margin-bottom: 68px; } .categoryGrid--tail { margin-top: 72px; } .categoryGrid--tail:empty { display: none; } .categoryGrid--opening .storyCard__copy { min-height: 122px; padding: 16px 16px 18px; } .categoryGrid--opening .storyCard__copy h2 { font-size: 18px; line-height: 1.07; } .categoryGrid--compact .storyCard__copy, .categoryGrid--tail .storyCard__copy { min-height: 104px; padding: 13px 13px 15px; } .categoryGrid--compact .storyCard__copy h2, .categoryGrid--tail .storyCard__copy h2 { font-size: 16px; line-height: 1.08; } .categoryGrid--feature { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; margin-bottom: 0; align-items: stretch; } .categoryGrid--feature .storyCard__copy { min-height: 122px; padding: 16px 17px 18px; } .categoryGrid--feature .storyCard__copy h2 { font-size: 21px; line-height: 1.06; } .categoryLower { margin-bottom: 0; } .categoryLead__media img, .categoryTrend__media img, .articleFeature__media img, .sidebarStory__image img { width: 100%; height: 100%; } .categoryLead__copy .cardAuthor { color: inherit; } .categoryTrend span { font-size: 11px; line-height: 1.25; } .loadMore { width: fit-content; min-height: 44px; margin-top: 56px; padding: 13px 28px 11px; font-size: 12px; text-align: center; } .loadMore[aria-busy="true"] { opacity: .65; pointer-events: none; } .articleMetaBar { font-size: 12px; } .articleByline small { font-size: 11px; line-height: 1.2; } .articleShare a, .articleShare button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--ink); color: var(--lime); font-size: 12px; font-weight: 900; cursor: pointer; } .articleShare a:hover, .articleShare a:focus-visible, .articleShare button:hover, .articleShare button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .listenButton { min-height: 44px; padding: 9px 16px 9px 10px; font-size: 12px; } .listenButton > span:first-child { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 9px; } .articleUpdate { border-left: 6px solid var(--lime); padding: 14px 18px; background: #f1f3ed; font-family: Arial, Helvetica, sans-serif; font-size: 14px; } .entryContent > *:first-child { margin-top: 0; } .entryContent a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .entryContent img { height: auto; } .entryContent figure { max-width: 100%; margin-inline: 0; } .entryContent iframe { max-width: 100%; } .aiSummary .eyebrow { color: var(--lime); } .aiSummary__actions button { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid var(--lime); border-radius: 50%; background: transparent; color: var(--lime); font-size: 18px; font-weight: 900; cursor: pointer; } .aiSummary__actions button:hover, .aiSummary__actions button:focus-visible { background: var(--lime); color: var(--ink); } .aiSummary__actions button::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 9px); left: 50%; width: max-content; max-width: 190px; transform: translate(-50%, 4px); opacity: 0; pointer-events: none; padding: 7px 9px; background: var(--lime); color: var(--ink); font-size: 11px; white-space: nowrap; transition: .15s ease; } .aiSummary__actions button:hover::after, .aiSummary__actions button:focus-visible::after { opacity: 1; transform: translate(-50%, 0); } .aiSummary > [data-ai-status] { grid-column: 1/-1; min-height: 18px; margin: 0; color: var(--lime); font-size: 12px; } .authorBox { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 55px; border-block: 1px solid var(--ink); padding: 25px 0; font-family: Arial, Helvetica, sans-serif; } .authorBox img { border-radius: 50%; } .articleContent .authorBox h2 { margin: 0 0 8px; padding: 0; background: transparent; font-size: 22px; } .authorBox p { margin: 0; font-size: 14px; line-height: 1.5; } .relatedArticles__grid { align-items: stretch; } .relatedArticles__grid .storyCard__copy { min-height: 118px; } .archivePage { min-height: 62vh; padding-top: 62px; padding-bottom: 100px; } .archiveHeader { margin-bottom: 38px; } .archiveHeader h1 { max-width: 920px; margin: 0; font-size: clamp(44px, 6vw, 80px); line-height: .92; letter-spacing: -.065em; } .archiveDescription { max-width: 760px; margin-top: 16px; font-size: 17px; line-height: 1.55; } .eyebrow { display: inline-block; margin: 0 0 12px; padding: 4px 7px 3px; background: var(--lime); color: var(--ink); font-size: 12px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; } .archiveGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 38px 22px; } .navigation.pagination { margin-top: 55px; } .nav-links { display: flex; flex-wrap: wrap; gap: 7px; } .page-numbers { display: grid; place-items: center; min-width: 44px; min-height: 44px; border: 1px solid var(--ink); padding: 8px; font-size: 13px; font-weight: 800; } .page-numbers.current, .page-numbers:hover, .page-numbers:focus-visible { background: var(--ink); color: var(--lime); } .authorHero { display: grid; grid-template-columns: 128px minmax(0, 760px); gap: 28px; align-items: center; margin-bottom: 30px; } .authorHero img { border-radius: 50%; } .authorHero h1 { margin: 0 0 12px; font-size: clamp(42px, 6vw, 72px); line-height: .92; letter-spacing: -.06em; } .authorHero p:last-child { margin: 0; font-size: 16px; line-height: 1.5; } .emptyState { grid-column: 1/-1; padding: 42px; background: #f0f2ec; } .emptyState h2 { margin: 0 0 12px; font-size: 32px; } .emptyState .searchForm { max-width: 680px; margin: 24px 0; } .emptyState--inverse { background: var(--ink); color: var(--lime); } .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 2px solid var(--ink); padding: 10px 16px; background: var(--ink); color: var(--lime); font-size: 12px; font-weight: 900; text-transform: uppercase; cursor: pointer; } .button--lime { background: var(--lime); color: var(--ink); } .infoPage__hero .eyebrow { margin-bottom: 14px; } .infoArticle { font-size: 16px; line-height: 1.65; } .infoArticle h2 { width: fit-content; background: var(--lime); padding: 3px 6px; } .infoArticle h3 { font-size: 19px; } .infoArticle ul, .infoArticle ol { padding-left: 24px; } .infoArticle li { margin-bottom: 8px; } .infoPage--elementor { min-height: 60vh; } .loginPage { position: relative; min-height: 680px; overflow: hidden; padding: 65px 0 140px; background: var(--lime); } .loginPage__angle { position: absolute; inset: auto 0 0; height: 105px; background: var(--ink); clip-path: polygon(0 30%, 62% 100%, 100% 47%, 100% 100%, 0 100%); } .loginPage__inner { position: relative; z-index: 1; max-width: 760px; } .loginPage h1 { margin: 0 0 30px; text-align: center; font-size: clamp(48px, 6vw, 76px); letter-spacing: -.06em; } .loginPanel { padding: 35px 40px 38px; background: #050505; color: var(--lime); } .loginPanel label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; } .loginPanel input[type="text"], .loginPanel input[type="password"] { width: 100%; min-height: 46px; margin: 0 0 18px; border: 0; border-bottom: 1px solid var(--lime); border-radius: 0; padding: 10px 2px; background: transparent; color: #fff; font-size: 16px; } .loginPanel .login-remember label { display: flex; align-items: center; gap: 8px; } .loginPanel input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--lime); } .loginPanel .login-submit input { width: 100%; min-height: 44px; border: 0; background: var(--lime); color: var(--ink); font-weight: 900; text-transform: uppercase; cursor: pointer; } .loginPanel__links { display: flex; justify-content: center; gap: 7px; margin: 18px 0 0; font-size: 13px; } .loginPanel__links a { text-decoration: underline; } .loginPanel > .textLink { display: inline-block; margin: 16px 0 0 12px; text-decoration: underline; } .notFoundPage { background: var(--ink); color: #fff; } .notFoundHero { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); gap: 60px; align-items: center; min-height: 590px; padding-block: 70px; } .notFoundHero__code { margin: 0; color: var(--lime); font-size: clamp(130px, 20vw, 285px); font-weight: 950; line-height: .74; letter-spacing: -.1em; } .notFoundHero h1 { margin: 0 0 18px; max-width: 700px; font-size: clamp(44px, 5vw, 76px); line-height: .92; letter-spacing: -.06em; } .notFoundHero p { max-width: 620px; font-size: 17px; line-height: 1.5; } .notFoundHero .searchForm { margin: 28px 0 18px; } .notFoundLatest { padding-block: 60px 90px; } .notFoundLatest > h2 { color: var(--lime); font-size: 34px; } .cookieBanner { position: fixed; right: 18px; bottom: 18px; left: 18px; z-index: 300; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; max-width: 1180px; margin-inline: auto; border: 2px solid var(--lime); padding: 18px 20px; background: var(--ink); color: #fff; box-shadow: 0 18px 50px rgb(0 0 0 / 30%); } .cookieBanner[hidden] { display: none; } .cookieBanner strong { display: block; margin-bottom: 5px; color: var(--lime); font-size: 18px; } .cookieBanner p { margin: 0; font-size: 13px; line-height: 1.45; } .cookieBanner p a { color: var(--lime); text-decoration: underline; } .cookieBanner__actions { display: flex; gap: 8px; } .cookieBanner button, .cookieDialog button { min-height: 44px; border: 2px solid var(--lime); padding: 8px 13px; background: transparent; color: var(--lime); font-size: 12px; font-weight: 900; cursor: pointer; } .cookieBanner .is-primary, .cookieDialog .is-primary { background: var(--lime); color: var(--ink); } .cookieDialog { width: min(650px, calc(100% - 28px)); max-height: calc(100vh - 28px); border: 3px solid var(--lime); padding: 0; background: var(--ink); color: #fff; } .cookieDialog::backdrop { background: rgb(0 0 0 / 65%); } .cookieDialog form { padding: 28px; } .cookieDialog h2 { margin: 0 0 10px; color: var(--lime); font-size: 30px; } .cookieDialog > form > p { margin: 0 0 20px; font-size: 14px; line-height: 1.45; } .cookieDialog label { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid rgb(255 255 255 / 25%); padding: 14px 0; } .cookieDialog label span { display: grid; gap: 3px; } .cookieDialog label small { color: #d7dbd2; font-size: 12px; } .cookieDialog input { width: 22px; height: 22px; accent-color: var(--lime); } .cookieDialog__actions { display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid rgb(255 255 255 / 25%); padding-top: 18px; } @media (max-width: 1100px) { .categoryGrid--feed, .archiveGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 999px) { .storyGrid, .categoryGrid--feed, .categoryGrid--opening, .categoryGrid--compact, .categoryGrid--tail, .archiveGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .categoryGrid--opening, .categoryGrid--compact { margin-bottom: 48px; } .categoryGrid--tail { margin-top: 48px; } } @media (max-width: 820px) { .utility { height: 32px; font-size: 11px; } .masthead__tools .searchButton { width: 44px; min-height: 44px; font-size: 0; } .masthead__tools .searchButton > span:first-child { font-size: 20px; } .nav__inner { display: block; padding-block: 8px 14px; } .nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; } .menuButton { width: 44px; min-height: 44px; } .cardAuthor { grid-template-columns: 34px minmax(0, 1fr); align-items: end; } .storyGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .categoryGrid--feed, .categoryGrid--opening, .categoryGrid--compact, .categoryGrid--tail, .archiveGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footerLinks ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; } .footerLinks a { display: block; min-height: 40px; padding-block: 10px; font-size: 12px; } .copyright { font-size: 12px; } .categoryTrend span { font-size: 11px; } .articleShare a, .articleShare button { width: 44px; height: 44px; } .archivePage { padding-top: 44px; } .authorHero { grid-template-columns: 92px minmax(0, 1fr); } .authorHero img { width: 92px; height: 92px; } .notFoundHero { grid-template-columns: 1fr; gap: 28px; min-height: 0; } .notFoundHero__code { font-size: 150px; } .cookieBanner { grid-template-columns: 1fr; gap: 14px; } } @media (max-width: 560px) { .custom-logo { max-width: 180px; max-height: 54px; } .featuredCard__copy { grid-template-columns: minmax(0, 1fr); } .featuredCard__copy .cardAuthor { grid-template-columns: 34px minmax(0, 1fr); } .storyGrid, .categoryGrid--feed, .categoryGrid--opening, .categoryGrid--compact, .categoryGrid--feature, .categoryGrid--tail, .archiveGrid { grid-template-columns: 1fr; } .storyCard__copy { min-height: 118px; } .storyCard__copy h2, .storyGrid .storyCard__copy h2 { font-size: 21px; } .storyCard--mini .storyCard__copy, .storyGrid .storyCard--mini .storyCard__copy, .categoryGrid--feed .storyCard--mini .storyCard__copy { min-height: 112px; padding: 18px 18px 20px; } .storyCard--mini .storyCard__copy h2, .storyGrid .storyCard--mini .storyCard__copy h2 { font-size: 20px; line-height: 1.1; } .newsletter__names { grid-template-columns: 1fr; } .newsletter__consent { font-size: 12px !important; } .categoryTitle { display: block; } .categoryTitle p { margin-top: 12px; font-size: 14px; line-height: 1.4; } .categoryGrid--feed .storyCard__copy { min-height: 112px; } .categoryGrid--opening, .categoryGrid--compact { margin-bottom: 42px; } .categoryGrid--tail { margin-top: 42px; } .categoryGrid--opening .storyCard__copy, .categoryGrid--compact .storyCard__copy, .categoryGrid--feature .storyCard__copy, .categoryGrid--tail .storyCard__copy { min-height: 108px; padding: 16px; } .categoryGrid--opening .storyCard__copy h2, .categoryGrid--compact .storyCard__copy h2, .categoryGrid--feature .storyCard__copy h2, .categoryGrid--tail .storyCard__copy h2 { font-size: 21px; line-height: 1.08; } .articleMetaBar { font-size: 12px; } .articleByline small { font-size: 11px; } .articleContent { font-size: 17px; } .articleContent .entryContent p, .infoArticle p, .infoArticle li { font-size: 16px; } .aiSummary__actions button { width: 48px; height: 48px; } .aiSummary__actions button::after { display: none; } .authorBox { grid-template-columns: 68px minmax(0, 1fr); gap: 16px; } .authorBox img { width: 68px; height: 68px; } .archiveHeader h1 { font-size: 42px; } .authorHero { grid-template-columns: 1fr; } .searchForm { grid-template-columns: 1fr; } .searchForm__submit { width: 100%; } .loginPage { min-height: 610px; padding-top: 44px; } .loginPanel { padding: 28px 20px 30px; } .cookieBanner { right: 8px; bottom: 8px; left: 8px; padding: 16px; } .cookieBanner__actions { display: grid; grid-template-columns: 1fr 1fr; } .cookieBanner__actions .is-primary { grid-column: 1/-1; } .cookieDialog form { padding: 22px 18px; } .cookieDialog__actions { display: grid; grid-template-columns: 1fr 1fr; } } /* Factelle 1.2.0: centred editorial frame, live utility data and reference-aligned cards */ :root { --frame: min(1240px, calc(100vw - 48px)); } .utility__weather { min-width: 0; transition: opacity .18s ease; } .utility__weather.is-changing { opacity: .2; } .utility__location { margin-left: .4em; white-space: nowrap; } .utility__location::before { content: "· "; } .leadGrid, .categoryLead { gap: 42px; } .afterLead, .contentLayout { gap: 48px; } .featuredCard__copy--main { padding-inline: 25px; } .cardAuthor { width: 62px; min-width: 0; gap: 5px; align-content: start; justify-items: start; } .cardAuthor__avatar { display: block; width: 42px; height: 42px; overflow: hidden; border: 1px solid currentColor; border-radius: 0; background: var(--paper); } .cardAuthor__avatar img { width: 100%; height: 100%; object-fit: cover; } .cardAuthor small { display: block; font-size: 9px; line-height: 1.08; } .cardAuthor b { margin-top: 1px; font-size: 10px; line-height: 1.08; } .cardAuthor--compact { width: 78px; grid-template-columns: 1fr; gap: 4px; align-items: start; } .cardAuthor--compact .cardAuthor__avatar { width: 26px; height: 26px; } .cardAuthor--compact small { font-size: 8px; } .cardAuthor--compact b { display: inline; font-size: 9px; } .trendItem { grid-template-columns: 115px minmax(0, 1fr); gap: 13px; } .trendItem h3 { margin-bottom: 7px; } .trendItem .cardAuthor, .categoryTrend .cardAuthor { display: grid; padding: 0; background: transparent; color: var(--ink); } .trendItem .cardAuthor__avatar, .categoryTrend .cardAuthor__avatar { display: block; padding: 0; background: var(--paper); } .trendItem .cardAuthor small, .categoryTrend .cardAuthor small { width: fit-content; padding: 2px 4px; background: var(--lime); } .categoryBody { padding-top: 68px; } .categoryLower { grid-template-columns: minmax(0, 1fr) 300px; gap: 42px; } .categorySidebar { position: sticky; top: 151px; align-self: start; } .categoryGrid--tail { margin-top: 48px; } .categoryGrid--tail .storyCard__copy { min-height: 98px; } .categoryTrend { grid-template-columns: 106px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 0; } .categoryTrend h3 { margin-bottom: 7px; font-size: 13px; } .categoryTrend .cardAuthor--compact { grid-template-columns: 1fr; gap: 4px; } .categoryTrend .cardAuthor--compact .cardAuthor__avatar { width: 23px; height: 23px; } .articleFeature__title { left: 6%; width: min(78%, 900px); } .articleColumns { grid-template-columns: minmax(0, 2.05fr) 300px; gap: 48px; } .articleSidebar { position: sticky; top: 151px; } .articleRecent { display: grid; gap: 17px; } .articleRecent > h2 { display: inline-block; width: fit-content; margin: 4px 0 0; padding: 3px 7px 4px; background: var(--lime); font-size: 23px; line-height: 1; letter-spacing: -.04em; } .articleShare { flex-wrap: wrap; justify-content: flex-end; } .articleShare a, .articleShare button { flex: 0 0 auto; } .articleShare svg, .socials svg { display: block; width: 18px; height: 18px; fill: currentColor; } .socials { gap: 5px; } .socials a, .socials span { min-width: 30px; min-height: 30px; } .socials svg { width: 17px; height: 17px; } .flightHero { padding: 72px 0 58px; background: var(--lime); } .flightHero__inner { text-align: center; } .flightHero h1 { max-width: 920px; margin: 0 auto 18px; font-size: clamp(45px, 6vw, 76px); line-height: .92; letter-spacing: -.06em; } .flightHero p:last-child { max-width: 700px; margin: 0 auto; font-size: 16px; line-height: 1.45; } .flightStatus { padding: 54px 0 100px; } .flightStatus__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin: 0 0 22px; } .flightStatus__heading h2 { margin: 0 0 7px; font-size: 30px; letter-spacing: -.045em; } .flightStatus__heading p { margin: 0; font-size: 12px; } .flightStatus__heading > a { border-bottom: 1px solid currentColor; font-size: 12px; font-weight: 800; } .flightStatus__list { border: 2px solid var(--ink); } .flightRow { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); min-height: 78px; border-bottom: 2px solid var(--ink); color: #fff; } .flightRow:last-child { border-bottom: 0; } .flightRow--good { background: #167c43; } .flightRow--delay { background: #c87400; } .flightRow--severe { background: #b41519; } .flightRow__airport, .flightRow__status { display: flex; align-items: center; gap: 15px; padding: 15px 20px; } .flightRow__airport { border-right: 2px solid var(--ink); } .flightRow__airport strong { min-width: 54px; font-size: 23px; letter-spacing: -.04em; } .flightRow__airport span, .flightRow__status b { font-size: 15px; } .flightRow__status { justify-content: space-between; } .flightRow__status small { max-width: 520px; font-size: 11px; line-height: 1.3; text-align: right; } .flightDisclaimer { max-width: 820px; margin: 22px auto 0; font-size: 12px; line-height: 1.45; text-align: center; } @media (max-width: 1100px) { :root { --frame: min(960px, calc(100vw - 36px)); } .leadGrid, .categoryLead { gap: 28px; } .afterLead, .contentLayout, .articleColumns { gap: 34px; } .categoryLower { grid-template-columns: minmax(0, 1fr) 275px; gap: 30px; } .categoryGrid--tail { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 999px) { .categorySidebar, .articleSidebar { position: static; } .categoryLower { grid-template-columns: 1fr; } .categoryGrid--tail { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { :root { --frame: calc(100% - 28px); } .cardAuthor { grid-template-columns: 34px minmax(0, 1fr); width: auto; align-items: center; } .cardAuthor__avatar { width: 34px; height: 34px; } .cardAuthor small { font-size: 9px; } .cardAuthor b { font-size: 10px; } .articleSidebar { grid-template-columns: 1fr; } .flightHero { padding: 50px 0 42px; } .flightStatus { padding: 42px 0 70px; } .flightRow { grid-template-columns: 1fr; } .flightRow__airport { border-right: 0; border-bottom: 1px solid rgb(0 0 0 / 32%); } } @media (max-width: 560px) { .utility__weather [data-weather-condition] { display: none; } .utility__location::before { content: ""; } .featuredCard__copy .cardAuthor { grid-template-columns: 34px minmax(0, 1fr); } .categoryGrid--tail { grid-template-columns: 1fr; } .articleShare { justify-content: flex-start; } .articleShare a, .articleShare button { width: 40px; height: 40px; } .flightStatus__heading { align-items: flex-start; flex-direction: column; } .flightRow__status { align-items: flex-start; flex-direction: column; gap: 6px; } .flightRow__status small { text-align: left; } } /* Factelle 1.2.1: compact reference-aligned shell, header and footer */ :root { --frame: min(1200px, calc(100vw - 48px)); --wide-frame: min(1599px, 90vw); } .wideFrame { width: var(--wide-frame); margin-inline: auto; } .masthead__top { min-height: 86px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(22px, 2vw, 38px); } .siteBrand, .masthead__tools { min-width: 0; } .brandLogo { width: 168px; max-height: 70px; } .custom-logo-link { display: block; line-height: 0; } .custom-logo { width: auto; max-width: 180px; max-height: 70px; } .masthead .nav { min-width: 0; background: transparent; } .masthead .nav__inner { min-height: 0; } .masthead .nav ul { flex-wrap: nowrap; gap: clamp(11px, 1.15vw, 22px); } .masthead .nav a { padding: 32px 0 29px; font-size: clamp(11px, .72vw, 13px); } .masthead__tools { align-self: center; gap: 12px; padding-top: 0; } .searchButton { white-space: nowrap; } .siteFooter { min-height: 180px; } .siteFooter::before { width: 49%; clip-path: polygon(0 35%, 100% 0, 100% 100%, 0 100%); } .siteFooter__shape { clip-path: polygon(0 0, 100% 35%, 100% 100%, 0 100%); } .siteFooter__inner { grid-template-columns: 180px minmax(0, 1fr); gap: 32px; min-height: 180px; padding: 46px 0 18px; } .footerBrand__logo { width: 126px; } .socials { margin-top: 9px; } .socials a, .socials span { min-width: 28px; min-height: 28px; } .footerLinks { align-self: center; padding: 31px 0 26px; } .footerLinks ul { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 18px; } .footerLinks a { font-size: 14px; white-space: nowrap; } .copyright { bottom: 13px; font-size: 12px; } @media (min-width: 1400px) { .siteFooter__shape { clip-path: polygon(0 0, 100% 35%, 100% 100%, 0 100%); } } @media (max-width: 1280px) { :root { --frame: min(1254px, calc(100vw - 36px)); --wide-frame: calc(100vw - 36px); } .masthead__top { min-height: 72px; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 10px; } .menuButton { display: block; width: 44px; min-height: 44px; padding: 6px; } .siteBrand { justify-self: center; } .brand { justify-content: center; } .brandLogo { width: 150px; max-height: 58px; } .custom-logo { max-width: 164px; max-height: 58px; } .masthead__tools { justify-self: end; gap: 0; } .masthead__tools .searchButton { width: 44px; min-height: 44px; padding: 0; font-size: 0; } .masthead__tools .searchButton > span:first-child { font-size: 20px; } .toolLink { display: none; } .masthead .nav { display: none; grid-column: 1 / -1; width: 100%; border-top: 1px solid rgb(23 25 22 / 20%); } .masthead .nav--open { display: block; } .masthead .nav__inner { display: block; padding: 8px 0 14px; } .masthead .nav ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 22px; } .masthead .nav a { display: block; padding: 11px 2px; border-bottom: 1px solid rgb(23 25 22 / 22%); font-size: 13px; } } @media (max-width: 999px) { .siteFooter { min-height: 0; background: var(--lime); } .siteFooter::before, .siteFooter__shape { display: none; } .siteFooter__inner { grid-template-columns: 155px minmax(0, 1fr); gap: 24px; min-height: 0; padding: 28px 0 20px; } .footerLinks { padding: 0 0 24px; } .copyright { bottom: 14px; } } @media (max-width: 820px) { :root { --frame: calc(100% - 28px); --wide-frame: calc(100% - 28px); } .masthead__top { min-height: 66px; } .masthead .nav ul { grid-template-columns: 1fr 1fr; } .siteFooter__inner { grid-template-columns: 1fr; gap: 13px; padding: 25px 0 20px; } .footerLinks ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .footerLinks a { display: block; min-height: 38px; padding-block: 9px; font-size: 11px; white-space: normal; } .copyright { position: static; } } @media (max-width: 420px) { .utility__inner { padding-inline: 0; } .footerLinks ul { grid-template-columns: 1fr; } .footerLinks a { min-height: 34px; padding-block: 7px; } } /* Figma homepage master — Home frame 1:510. */ :root { --frame: min(1254px, calc(100vw - 48px)); --wide-frame: min(1254px, calc(100vw - 48px)); } .masthead__top { min-height: 70px; grid-template-columns: 168px minmax(0, 1fr) auto; gap: 0; } .siteBrand { width: 168px; } .brandLogo { width: 83px; max-height: 72px; } .custom-logo { width: auto; max-width: 83px; max-height: 70px; } .masthead .nav ul { gap: 40px; } .masthead .nav a { padding: 25px 0 22px; font-size: 20px; line-height: 1; letter-spacing: -.024em; } .masthead__tools { gap: 16px; } .searchButton { min-height: 43px; font-size: 14px; line-height: 1; } .searchButton > span:first-child { font-size: 24px; line-height: 1; } .toolLink { padding: 7px 12px 6px; font-size: 12px; line-height: 1.65; } .home .headerStudy { min-height: 0; padding: 16px 0 40px; } .homeAd { position: relative; z-index: 2; display: grid; place-items: center; height: 102px; margin-bottom: 20px; overflow: hidden; background: #d9d9d9; color: var(--ink); } .homeAd > span { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .homeAd__widget, .homeAd__widget > * { width: 100%; max-width: 100%; } .homeAd__widget { display: grid; place-items: center; height: 100%; margin: 0; } .homeAd__widget iframe, .homeAd__widget img { max-height: 102px; margin-inline: auto; object-fit: contain; } .home .leadGrid { grid-template-columns: minmax(0, 2.15fr) minmax(320px, 1fr); gap: 44px; } .home .featuredCard__copy--main { min-height: 144px; padding: 21px 26px; grid-template-columns: minmax(0, 1fr) 69px; gap: 23px; } .home .featuredCard__copy h1 { font-size: clamp(38px, 3.34vw, 48px); line-height: 1.066; letter-spacing: -.0555em; } .home .featuredCard--side .featuredCard__copy { min-height: 118px; padding: 18px; grid-template-columns: minmax(0, 1fr) 61px; gap: 23px; } .home .featuredCard--side .featuredCard__copy h2 { font-size: 20px; line-height: 1.388; letter-spacing: -.068em; } .home .leadGrid__rail { gap: 32px; } .home .featuredCard__copy--main .cardAuthor { width: 69px; } .home .featuredCard__copy--main .cardAuthor__avatar { width: 44px; height: 44px; } .home .featuredCard--side .cardAuthor { width: 61px; } .home .featuredCard--side .cardAuthor__avatar { width: 27px; height: 27px; } .home .afterLead { grid-template-columns: minmax(0, 2.09fr) minmax(330px, 1fr); gap: 70px; padding: 0 0 40px; } .home .afterLead__stories { gap: 32px; } .home .afterLead .storyCard__media { aspect-ratio: 16 / 10.2; } .home .afterLead .storyCard__copy { min-height: 118px; grid-template-columns: minmax(0, 1fr) 61px; gap: 23px; padding: 18px; background: var(--ink); color: var(--lime); } .home .afterLead .storyCard__copy h2 { color: inherit; font-size: 20px; font-weight: 400; line-height: 1.388; letter-spacing: -.068em; } .home .afterLead .storyCard:hover .storyCard__copy, .home .afterLead .storyCard:focus-within .storyCard__copy { background: var(--lime); color: var(--ink); } .home .afterLead .cardAuthor { width: 61px; } .home .afterLead .cardAuthor__avatar { width: 27px; height: 27px; } .home .newsletter { min-height: 410px; padding: 30px 32px 25px; } .home .newsletter h2 { margin-bottom: 10px; font-size: 33px; line-height: .95; } .home .newsletter p { font-size: 14px; line-height: 1.25; } .home .newsletter__names { margin-top: 19px; } .home .newsletter input[type="text"], .home .newsletter input[type="email"] { min-height: 50px; font-size: 15px; } .home .newsletter button { min-height: 46px; } .home .contentLayout { grid-template-columns: minmax(0, 2.207fr) minmax(330px, 1fr); gap: 90px; padding-bottom: 80px; } .home .newsSection { padding-bottom: 59px; } .home .sectionHeading { min-height: 39px; margin-bottom: 22px; padding-bottom: 8px; } .home .sectionHeading h2 { font-size: 27px; line-height: 1.05; } .home .sectionHeading h2 span { padding: 0 5px 2px; } .home .storyGrid { gap: 24px; } .home .storyGrid .storyCard__media { aspect-ratio: 16 / 9; } .home .storyGrid .storyCard__media > span { display: none; } .home .storyGrid .storyCard__copy { min-height: 128px; padding: 18px 18px 20px; } .home .storyGrid .storyCard__copy h2 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; font-size: 20px; font-weight: 700; line-height: 1.1; letter-spacing: -.04em; } .home .trending { top: 118px; } .home .trending > h2 { margin-bottom: 6px; padding: 2px 7px 4px; font-size: 32px; line-height: .84; } .home .trendItem { grid-template-columns: 167px minmax(0, 1fr); gap: 0; min-height: 133px; padding: 2px 0; } .home .trendItem__image { align-self: center; aspect-ratio: 167 / 125; } .home .trendItem__copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 12px; } .home .trendItem h3 { display: -webkit-box; overflow: hidden; margin: 0 0 7px; -webkit-box-orient: vertical; -webkit-line-clamp: 4; font-size: 15px; line-height: 1.05; letter-spacing: -.03em; } .trendItem__byline { display: inline-block; align-self: flex-start; padding: 2px 4px; background: var(--lime); font-size: 8px; line-height: 1.2; } .trendItem__byline b { font-size: 9px; } .siteFooter { min-height: 220px; } .siteFooter__inner { grid-template-columns: 110px minmax(0, 1fr); min-height: 220px; padding: 58px 0 22px; } .footerBrand__logo { width: 83px; } .footerLinks { padding: 27px 0; } .footerLinks ul { gap: 9px 18px; } .footerLinks a { font-size: 14px; } .copyright { top: 107px; bottom: auto; } @supports (content-visibility: auto) { .home .newsSection { content-visibility: auto; contain-intrinsic-size: 389px; } } @media (max-width: 1280px) { :root { --frame: min(1254px, calc(100vw - 36px)); --wide-frame: calc(100vw - 36px); } .masthead__top { min-height: 72px; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 10px; } .siteBrand { width: auto; } .brandLogo { width: 83px; max-height: 60px; } .custom-logo { max-width: 96px; max-height: 60px; } .home .leadGrid { gap: 28px; } .home .afterLead, .home .contentLayout { gap: 34px; } } @media (max-width: 999px) { .home .headerStudy { padding-bottom: 32px; } .homeAd { height: 90px; } .home .leadGrid { grid-template-columns: 1fr; } .home .leadGrid__rail { grid-template-columns: 1fr 1fr; grid-template-rows: none; } .home .afterLead, .home .contentLayout { grid-template-columns: 1fr; } .home .afterLead { padding-bottom: 50px; } .home .trending { position: static; } .siteFooter { min-height: 0; } .siteFooter__inner { min-height: 0; } .copyright { position: static; } } @media (max-width: 820px) { :root { --frame: calc(100% - 28px); --wide-frame: calc(100% - 28px); } .homeAd { height: 72px; } .home .featuredCard__copy--main { min-height: 0; } .home .featuredCard__copy h1 { font-size: clamp(32px, 8vw, 46px); } .home .afterLead__stories { grid-template-columns: 1fr 1fr; gap: 20px; } .home .storyGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home .trendItem { grid-template-columns: 140px minmax(0, 1fr); } .home .trendItem__image { aspect-ratio: 4 / 3; } } @media (max-width: 560px) { .home .headerStudy { padding-top: 12px; } .homeAd { height: 56px; margin-bottom: 14px; } .homeAd > span { font-size: 10px; } .home .leadGrid__rail, .home .afterLead__stories, .home .storyGrid { grid-template-columns: 1fr; } .home .featuredCard__copy--main, .home .featuredCard--side .featuredCard__copy, .home .afterLead .storyCard__copy { grid-template-columns: minmax(0, 1fr); } .home .featuredCard__copy h1 { font-size: 32px; line-height: 1; } .home .featuredCard--side .featuredCard__copy h2, .home .afterLead .storyCard__copy h2 { font-size: 21px; line-height: 1.08; } .home .newsletter { min-height: 0; padding: 26px 20px; } .home .newsletter__names { grid-template-columns: 1fr; } .home .sectionHeading h2 { font-size: 24px; } .home .trendItem { grid-template-columns: 120px minmax(0, 1fr); min-height: 105px; } .home .trendItem h3 { font-size: 14px; } } @media (prefers-reduced-motion: reduce) { .featuredCard__image img, .storyCard__media img, .trendItem__image img { transition: none; } } /* Figma category master — Technology frame 6:1900. */ .categoryPage .categoryHero { padding: 20px 0 40px; background: var(--ink); } .categoryPage .categoryHero__angle { height: 118px; clip-path: polygon(0 70%, 100% 31%, 100% 100%, 0 100%); } .categoryPage .categoryTitle { min-height: 41px; gap: 19px; margin-bottom: 30px; } .categoryPage .categoryTitle h1 { padding: 4px 10px 5px; font-size: 36px; font-weight: 700; line-height: .9; letter-spacing: -.06em; } .categoryPage .categoryTitle p { font-size: 20px; font-weight: 700; line-height: 1.12; letter-spacing: -.014em; } .categoryPage .categoryLead { grid-template-columns: minmax(0, 826fr) minmax(0, 384fr); gap: 44px; } .categoryPage .categoryLead__main .categoryLead__media { aspect-ratio: 826 / 441; } .categoryPage .categoryLead__main .categoryLead__copy { min-height: 113px; padding: 20px 25px 19px; grid-template-columns: minmax(0, 1fr) 68px; gap: 21px; } .categoryPage .categoryLead__main .categoryLead__copy h2 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 31px; font-weight: 400; line-height: 1.05; letter-spacing: -.045em; } .categoryPage .categoryLead__rail { gap: 29px; } .categoryPage .categoryLead__side .categoryLead__media { aspect-ratio: 384 / 198; } .categoryPage .categoryLead__side .categoryLead__copy { min-height: 101px; padding: 15px 17px 14px; grid-template-columns: minmax(0, 1fr) 65px; gap: 21px; } .categoryPage .categoryLead__side .categoryLead__copy h2 { font-size: 21px; font-weight: 400; line-height: 1.02; letter-spacing: -.045em; } .categoryPage .categoryLead__media > span { padding: 6px 8px 5px; font-size: 10px; line-height: 1.55; } .categoryPage .categoryBody { padding: 71px 0 40px; } .categoryPage .categoryGrid--opening { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px 25px; margin-bottom: 58px; } .categoryPage .categoryGrid--opening .storyCard__media { aspect-ratio: 399 / 225; } .categoryPage .categoryGrid--opening .storyCard__copy { min-height: 127px; padding: 17px 17px 19px; } .categoryPage .categoryGrid--opening .storyCard__copy h2 { font-size: 19px; font-weight: 700; line-height: 1.07; letter-spacing: -.04em; } .categoryPage .categoryGrid--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 28px; margin-bottom: 41px; } .categoryPage .categoryGrid--compact .storyCard__media, .categoryPage .categoryGrid--feature .storyCard__media, .categoryPage .categoryGrid--tail .storyCard__media { aspect-ratio: 16 / 9; } .categoryPage .categoryGrid--compact .storyCard__copy { min-height: 149px; padding: 21px 21px 24px; } .categoryPage .categoryGrid--compact .storyCard__copy h2 { font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: -.04em; } .categoryPage .categoryGrid--compact .storyCard__media > span, .categoryPage .categoryGrid--tail .storyCard__media > span { display: none; } .categoryPage .categoryLower { grid-template-columns: minmax(0, 827px) minmax(0, 1fr); gap: 25px; align-items: start; padding-top: 71px; } .categoryPage .categoryLower--no-feed { grid-template-columns: 1fr; } .categoryPage .categoryLower--no-feed .categorySidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } .categoryPage .categoryGrid--feature { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 25px; } .categoryPage .categoryGrid--feature .storyCard__copy { min-height: 127px; padding: 17px 17px 19px; } .categoryPage .categoryGrid--feature .storyCard__copy h2 { font-size: 19px; font-weight: 700; line-height: 1.07; letter-spacing: -.04em; } .categoryPage .categoryGrid--tail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 21px 25px; margin-top: 58px; } .categoryPage .categoryGrid--tail .storyCard__copy { min-height: 132px; padding: 19px 19px 21px; } .categoryPage .categoryGrid--tail .storyCard__copy h2 { font-size: 21px; font-weight: 700; line-height: 1.1; letter-spacing: -.04em; } .categoryPage .categorySidebar { position: sticky; top: 118px; display: grid; gap: 22px; align-self: start; } .categoryPage .categorySidebar .newsletter { min-height: 425px; padding: 31px 33px 26px; } .categoryPage .categorySidebar .newsletter h2 { margin-bottom: 10px; font-size: 34px; line-height: .95; } .categoryPage .categorySidebar .newsletter p { font-size: 14px; line-height: 1.25; } .categoryPage .categorySidebar .newsletter__names { margin-top: 20px; } .categoryPage .categorySidebar .newsletter input[type="text"], .categoryPage .categorySidebar .newsletter input[type="email"] { min-height: 51px; font-size: 15px; } .categoryPage .categorySidebar .newsletter button { min-height: 48px; } .categoryPage .categoryTrending > h2 { margin: 0 0 6px; padding: 2px 7px 4px; font-size: 32px; line-height: .84; } .categoryPage .categoryTrend { grid-template-columns: 167px minmax(0, 1fr); gap: 0; min-height: 133px; padding: 2px 0; border-top: 1px solid #9b9e97; } .categoryPage .categoryTrend:last-child { border-bottom: 1px solid #9b9e97; } .categoryPage .categoryTrend__media { aspect-ratio: 167 / 125; } .categoryPage .categoryTrend__copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 12px; } .categoryPage .categoryTrend h3 { display: -webkit-box; overflow: hidden; margin: 0 0 7px; -webkit-box-orient: vertical; -webkit-line-clamp: 4; font-size: 15px; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; } .categoryPage .categoryTrend .trendItem__byline { align-self: flex-start; padding: 2px 4px; background: var(--lime); font-size: 8px; line-height: 1.2; } .categoryPage .categoryTrend .trendItem__byline b { font-size: 9px; } .categoryPage .categoryTrendAd { margin: 0; min-height: 40px; padding: 13px 0 9px; border-bottom: 1px solid #9b9e97; font-size: 15px; font-weight: 700; } .categoryPage .loadMore { min-height: 33px; margin-top: 40px; padding: 7px 12px 6px; border: 0; background: var(--ink); color: var(--lime); font-size: 12px; line-height: 1.65; text-transform: uppercase; } @media (max-width: 1280px) { .categoryPage .categoryTitle p { font-size: 16px; } .categoryPage .categoryLead { grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr); gap: 28px; } .categoryPage .categoryLead__main .categoryLead__copy h2 { font-size: 28px; } .categoryPage .categoryLead__side .categoryLead__copy h2 { font-size: 18px; } .categoryPage .categoryGrid--compact { gap-inline: 18px; } .categoryPage .categoryGrid--compact .storyCard__copy h2 { font-size: 19px; } .categoryPage .categoryLower { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; } .categoryPage .categoryTrend { grid-template-columns: 130px minmax(0, 1fr); min-height: 104px; } } @media (max-width: 999px) { .categoryPage .categoryHero { padding-bottom: 64px; } .categoryPage .categoryLead { grid-template-columns: 1fr; } .categoryPage .categoryLead__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } .categoryPage .categoryGrid--opening { grid-template-columns: repeat(2, minmax(0, 1fr)); } .categoryPage .categoryGrid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } .categoryPage .categoryLower { grid-template-columns: 1fr; gap: 52px; padding-top: 52px; } .categoryPage .categorySidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { .categoryPage .categoryTitle { display: block; } .categoryPage .categoryTitle h1 { font-size: 31px; } .categoryPage .categoryTitle p { margin-top: 12px; font-size: 14px; line-height: 1.35; } .categoryPage .categoryLead__main .categoryLead__copy, .categoryPage .categoryLead__side .categoryLead__copy { margin: 0; } .categoryPage .categoryBody { padding-top: 52px; } .categoryPage .categoryGrid--feature, .categoryPage .categoryGrid--tail { grid-template-columns: repeat(2, minmax(0, 1fr)); } .categoryPage .categorySidebar { grid-template-columns: 1fr; } .categoryPage .categoryLower--no-feed .categorySidebar { grid-template-columns: 1fr; } } @media (max-width: 560px) { .categoryPage .categoryHero { padding-top: 18px; } .categoryPage .categoryLead__rail, .categoryPage .categoryGrid--opening, .categoryPage .categoryGrid--compact, .categoryPage .categoryGrid--feature, .categoryPage .categoryGrid--tail { grid-template-columns: 1fr; } .categoryPage .categoryLead__main .categoryLead__copy, .categoryPage .categoryLead__side .categoryLead__copy { grid-template-columns: minmax(0, 1fr); } .categoryPage .categoryLead__main .categoryLead__copy h2 { font-size: 28px; } .categoryPage .categoryLead__side .categoryLead__copy h2 { font-size: 22px; } .categoryPage .categoryGrid--compact .storyCard__copy h2, .categoryPage .categoryGrid--tail .storyCard__copy h2 { font-size: 21px; } .categoryPage .categorySidebar .newsletter { min-height: 0; padding: 26px 20px; } .categoryPage .categorySidebar .newsletter__names { grid-template-columns: 1fr; } .categoryPage .categoryTrend { grid-template-columns: 120px minmax(0, 1fr); min-height: 105px; } .categoryPage .categoryTrend h3 { font-size: 14px; } } /* Figma article template — node 5:678. */ .single-post .articlePage { overflow: hidden; } .single-post .articlePage .frame { width: min(1254.96px, calc(100vw - 48px)); } .single-post .articleFeature { padding: 68px 0 24px; } .single-post .articleFeature__media { aspect-ratio: 1253.174 / 654; } .single-post .articleFeature__title { top: -40px; left: 50%; width: min(940px, calc(100% - 64px)); min-height: 144px; transform: translateX(-50%); padding: 24.335px 37.595px 22px; } .single-post .articleFeature__title > span { display: block; height: 33.573px; margin: 0; padding-top: 5.744px; font-size: 11.487px; line-height: 18.954px; letter-spacing: .05em; } .single-post .articleFeature__title h1 { max-width: 865px; font-size: 40px; font-weight: 400; line-height: 61.406px; letter-spacing: -.086em; } .single-post .articleFeature__angle { height: 185px; clip-path: polygon(0 82%, 100% 22%, 100% 100%, 0 100%); } .single-post .articleMetaBar { grid-template-columns: 429.2px 236.8px 222px minmax(300px, 1fr); min-height: 62px; margin-top: 0; margin-bottom: 25px; border: 6px solid var(--paper); font-size: 12px; } .single-post .articleMetaBar > * { min-height: 50px; padding: 7px 17px; } .single-post .articleByline__avatar { display: block; width: 30px; height: 30px; flex: 0 0 30px; overflow: hidden; border-radius: 50%; background: var(--ink); } .single-post .articleByline__avatar img { width: 100%; height: 100%; object-fit: cover; } .single-post .articleMetaBar__read { gap: 8px; } .single-post .articleMetaBar__read > span { font-size: 24px; line-height: 1; } .single-post .articleShare { gap: 10px; justify-content: flex-end; } .single-post .articleShare a, .single-post .articleShare button { width: 36px; height: 36px; flex: 0 0 36px; } .single-post .articleColumns { grid-template-columns: minmax(0, 891.02px) minmax(0, 313.74px); gap: 50.2px; padding-bottom: 94px; } .single-post .articleContent { width: 100%; max-width: 888.93px; font-size: 18.824px; line-height: 1.67; } .single-post .listenButton { min-height: 46px; margin-bottom: 25px; padding: 9px 17px 9px 10px; font-size: 12.55px; } .single-post .listenButton > span:first-child { width: 25px; height: 25px; flex: 0 0 25px; } .single-post .entryContent p { margin-bottom: 24px; } .single-post .entryContent h2 { margin-top: 44px; margin-bottom: 16px; padding: 2px 6px 3px; font-size: 25.1px; line-height: 1.16; } .single-post .entryContent h3 { font-size: 20.9px; } .single-post .entryContent ul, .single-post .entryContent ol { padding-left: 24px; } .single-post .entryContent li { margin-bottom: 7px; } .single-post .entryContent .wp-block-table { max-width: 100%; margin: 17px 0 38px; overflow-x: auto; } .single-post .entryContent table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; line-height: 1.45; } .single-post .entryContent th, .single-post .entryContent td { border: 1px solid var(--ink); padding: 10px; text-align: left; vertical-align: middle; } .single-post .entryContent th { font-family: Arial, Helvetica, sans-serif; font-weight: 800; } .single-post .articleSidebar { gap: 48px; } .single-post .articleSidebar .newsletter { padding: 31px 31px 24px; } .single-post .articleRecent h2 { width: fit-content; margin: 0 0 18px; padding: 3px 7px 4px; background: var(--lime); font-size: 25.1px; line-height: 1.1; letter-spacing: -.04em; } .single-post .articleRecent { display: grid; gap: 18px; } .single-post .sidebarStory__image { aspect-ratio: 313.74 / 178.44; } .single-post .sidebarStory > strong { min-height: 85px; padding: 14px 16px; font-size: 17px; font-weight: 700; line-height: 1.18; } .single-post .aiSummary { min-height: 117px; margin-top: 40px; } .single-post .authorBox { min-height: 108px; } .single-post .relatedArticles { padding: 36px 0 104px; } .single-post .relatedArticles__heading { margin-bottom: 24px; } .single-post .relatedArticles__heading h2 { font-size: 29.3px; } .single-post .relatedArticles__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 31.35px 25.08px; } .single-post .relatedArticles__grid .storyCard--mini { min-height: 297.43px; } .single-post .relatedArticles__grid .storyCard--mini .storyCard__media { aspect-ratio: 294.69 / 165.763; } .single-post .relatedArticles__grid .storyCard--mini .storyCard__copy { min-height: 131.67px; padding: 18.81px; } .single-post .relatedArticles__grid .storyCard--mini .storyCard__copy h2 { font-size: 20.9px; font-weight: 700; line-height: 1.1; letter-spacing: -.04em; } @media (max-width: 1280px) { .single-post .articleFeature { padding-top: 52px; } .single-post .articleFeature__title h1 { font-size: clamp(34px, 3.4vw, 40px); } .single-post .articleMetaBar { grid-template-columns: minmax(250px, 1.35fr) minmax(150px, .78fr) minmax(160px, .75fr) auto; } .single-post .articleColumns { grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; } } @media (max-width: 999px) { .single-post .articleFeature { padding-top: 32px; } .single-post .articleFeature__title { width: min(760px, calc(100% - 48px)); } .single-post .articleMetaBar { grid-template-columns: 1.15fr .85fr; } .single-post .articleMetaBar > *:nth-child(2) { border-right: 0; } .single-post .articleShare { justify-content: flex-start; } .single-post .articleColumns { grid-template-columns: 1fr; gap: 54px; } .single-post .articleContent { margin-inline: auto; } .single-post .articleSidebar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .single-post .articleRecent { gap: 16px; } .single-post .relatedArticles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { .single-post .articlePage .frame { width: calc(100% - 28px); } .single-post .articleFeature { padding: 0 0 24px; } .single-post .articlePage .articleFeature__inner { width: 100%; } .single-post .articleFeature__media { aspect-ratio: 4 / 3; } .single-post .articleFeature__title { position: relative; inset: auto; width: calc(100% - 28px); min-height: 0; margin: -72px auto 0; transform: none; padding: 20px 21px 22px; } .single-post .articleFeature__title h1 { font-size: clamp(31px, 7.5vw, 42px); line-height: 1.06; letter-spacing: -.06em; } .single-post .articleMetaBar { width: calc(100% - 28px); margin-top: 0; } .single-post .articleColumns { width: calc(100% - 28px); } .single-post .articleSidebar { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .single-post .articleFeature__title { margin-top: -54px; padding: 18px 17px 20px; } .single-post .articleFeature__title h1 { font-size: 31px; line-height: 1.02; } .single-post .articleMetaBar { grid-template-columns: 1fr 1fr; border-width: 4px; font-size: 10px; } .single-post .articleByline { grid-column: 1 / -1; } .single-post .articleMetaBar > * { min-height: 44px; padding: 6px 10px; } .single-post .articleMetaBar__read > span { font-size: 19px; } .single-post .articleShare { grid-column: 1 / -1; flex-wrap: wrap; justify-content: flex-start; } .single-post .articleShare a, .single-post .articleShare button { width: 34px; height: 34px; flex-basis: 34px; } .single-post .articleContent { font-size: 17px; line-height: 1.64; } .single-post .entryContent h2 { font-size: 23px; } .single-post .entryContent table { font-size: 13px; } .single-post .articleSidebar { grid-template-columns: 1fr; } .single-post .relatedArticles__heading { align-items: flex-start; flex-direction: column; gap: 8px; } .single-post .relatedArticles__grid { grid-template-columns: 1fr; } .single-post .relatedArticles__grid .storyCard--mini { min-height: 0; } .single-post .relatedArticles__grid .storyCard--mini .storyCard__copy { min-height: 112px; } } /* Factelle 2.0.2 release overrides: authoritative shared shell and sparse layouts. */ /* The bundled logo is now tightly cropped; size the visible mark, not its old canvas. */ .siteBrand { width: 168px; } .brandLogo, .custom-logo { width: auto; max-width: 146px; max-height: 70px; } /* Carry the hero colours through the upper half of the lead compositions. */ .home .headerStudy__angle { inset: 0; width: 100%; height: auto; background: var(--paper); clip-path: polygon(0 57%, 100% 42%, 100% 100%, 0 100%); } .categoryPage .categoryHero__angle { inset: 0; width: 100%; height: auto; background: var(--paper); clip-path: polygon(0 60%, 100% 44%, 100% 100%, 0 100%); } /* Sparse categories keep the Figma feed/sidebar hierarchy instead of a wide 2-up form. */ .categoryPage .categoryLower--no-feed { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: 28px; } .categoryPage .categoryLower--no-feed .categoryLower__feed { display: none; } .categoryPage .categoryLower--no-feed .categorySidebar { grid-column: 2; grid-template-columns: minmax(0, 1fr); width: 100%; } /* One final footer definition prevents historical rules from defeating mobile stacking. */ .siteFooter { min-height: 232px; } .siteFooter__inner { grid-template-columns: 220px minmax(0, 1fr); gap: 34px; min-height: 232px; padding: 58px 0 22px; } .footerBrand__logo { width: 126px; max-width: none; } .socials { display: grid; grid-auto-flow: column; grid-auto-columns: 30px; justify-content: start; width: max-content; max-width: 100%; gap: 5px; margin-top: 12px; } .socials a, .socials span { width: 30px; min-width: 30px; height: 30px; min-height: 30px; color: var(--ink); } .socials span { opacity: 1; } .socials svg { width: 18px; height: 18px; fill: currentColor; } .footerLinks { align-self: center; padding: 27px 0; } .footerLinks ul { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; } .footerLinks a { font-size: 14px; line-height: 1.2; white-space: nowrap; } .copyright { top: auto; right: 0; bottom: 22px; font-size: 12px; line-height: 1.4; } @media (max-width: 1280px) { .siteBrand { width: auto; } .brandLogo, .custom-logo { max-width: 134px; max-height: 60px; } .categoryPage .categoryLower--no-feed { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); } } @media (max-width: 999px) { .home .headerStudy__angle { clip-path: polygon(0 52%, 100% 41%, 100% 100%, 0 100%); } .categoryPage .categoryHero__angle { clip-path: polygon(0 55%, 100% 43%, 100% 100%, 0 100%); } .categoryPage .categoryLower--no-feed { grid-template-columns: 1fr; } .categoryPage .categoryLower--no-feed .categorySidebar { grid-column: 1; max-width: 400px; justify-self: end; } .siteFooter { min-height: 0; background: var(--lime); } .siteFooter::before, .siteFooter__shape { display: none; } .siteFooter__inner { grid-template-columns: 1fr; gap: 18px; min-height: 0; padding: 30px 0 24px; } .footerBrand__logo { width: 118px; } .footerLinks { padding: 0; } .copyright { position: static; margin-top: 2px; } } @media (max-width: 820px) { .brandLogo, .custom-logo { max-width: 116px; max-height: 54px; } .home .headerStudy__angle { clip-path: polygon(0 47%, 100% 38%, 100% 100%, 0 100%); } .categoryPage .categoryHero__angle { clip-path: polygon(0 50%, 100% 39%, 100% 100%, 0 100%); } .categoryPage .categoryLower--no-feed .categorySidebar { max-width: none; justify-self: stretch; } .footerLinks ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; } .footerLinks a { display: block; min-height: 42px; padding: 11px 0; white-space: normal; } } @media (max-width: 480px) { .footerLinks ul { grid-template-columns: 1fr; } } /* Factelle 2.0.3: targeted shell, byline and article-alignment corrections. */ /* Give the fallback mark a definite flex size; width:auto collapsed it to 0px. */ .siteBrand { display: flex; align-items: center; } .brand { width: 146px; min-width: 146px; height: 70px; flex: 0 0 146px; justify-content: flex-start; } .brandLogo { width: 146px; max-width: 146px; height: auto; max-height: 70px; } .custom-logo-link { display: flex; width: 146px; height: 70px; align-items: center; } .custom-logo { width: auto; max-width: 146px; max-height: 70px; } /* Desktop author chips use the exact Figma avatar, label and line measurements. */ @media (min-width: 821px) { .home .featuredCard__copy--main .cardAuthor { width: 64.79px; gap: 5.225px; } .home .featuredCard__copy--main .cardAuthor__avatar { width: 43.89px; height: 43.89px; } .home .featuredCard__copy--main .cardAuthor small, .categoryPage .categoryLead .cardAuthor small { font-size: 9.405px; line-height: 10.157px; } .home .featuredCard__copy--main .cardAuthor b, .categoryPage .categoryLead .cardAuthor b { font-size: 10.45px; line-height: 11.286px; } .home .featuredCard--side .cardAuthor, .home .afterLead .cardAuthor { width: 61px; gap: 4.18px; } .home .featuredCard--side .cardAuthor__avatar, .home .afterLead .cardAuthor__avatar { width: 27.17px; height: 27.17px; } .home .featuredCard--side .cardAuthor small, .home .afterLead .cardAuthor small { font-size: 8.36px; line-height: 9.029px; } .home .featuredCard--side .cardAuthor b, .home .afterLead .cardAuthor b { display: inline; font-size: 9.405px; line-height: 10.157px; } .categoryPage .categoryLead .cardAuthor { width: 64.806px; gap: 5.226px; } .categoryPage .categoryLead .cardAuthor__avatar { width: 43.901px; height: 43.901px; } .trendItem__byline { line-height: 8.64px; } .trendItem__byline b { line-height: 9.72px; } } /* Use one shared frame edge and prevent the 313.74px article rail growing to 335px. */ .single-post .articlePage .frame { width: var(--frame); } .single-post .articleSidebar { min-width: 0; grid-template-columns: minmax(0, 1fr); } .single-post .articleSidebar > * { width: 100%; min-width: 0; max-width: 100%; } @media (max-width: 1280px) { .brand { width: 134px; min-width: 134px; height: 60px; flex-basis: 134px; justify-content: center; } .brandLogo, .custom-logo { width: 134px; max-width: 134px; max-height: 60px; } .custom-logo-link { width: 134px; height: 60px; } } @media (max-width: 999px) { .single-post .articleSidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { .brand { width: 116px; min-width: 116px; height: 54px; flex-basis: 116px; } .brandLogo, .custom-logo { width: 116px; max-width: 116px; max-height: 54px; } .custom-logo-link { width: 116px; height: 54px; } .footerBrand { display: none; } .socials { margin-top: 0; } } @media (max-width: 560px) { .single-post .articleSidebar { grid-template-columns: minmax(0, 1fr); } } /* Factelle 2.1.0: final layout, Trending, consent and responsive corrections. */ /* Keep the Figma 1254px master at 1440px, while using wide displays more effectively instead of leaving the publication in a narrow centre column. */ @media (min-width: 1600px) { :root { --frame: min(1500px, calc(100vw - 96px)); --wide-frame: min(1500px, calc(100vw - 96px)); } .single-post .articleColumns, .page .infoPage:not(.infoPage--elementor) .infoPage__layout { justify-content: center; } } /* Trending media is deliberately contained: no faces, text or product imagery is cut off merely to fill a thumbnail box. */ .home .trendItem { grid-template-columns: 184px minmax(0, 1fr); min-height: 146px; } .home .trendItem__image, .categoryPage .categoryTrend__media { width: 100%; aspect-ratio: 4 / 3; background: #e5e7e1; } .home .trendItem__image img, .categoryPage .categoryTrend__media img { width: 100%; height: 100%; object-fit: contain; object-position: center; } .categoryPage .categoryTrend { grid-template-columns: 184px minmax(0, 1fr); min-height: 146px; } /* The first-visit privacy notice is a centred, modal-like decision surface on desktop, laptop and mobile, matching the reference interaction. */ .cookieBanner { top: 50%; right: auto; bottom: auto; left: 50%; width: min(880px, calc(100vw - 32px)); max-width: 880px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); margin: 0; transform: translate(-50%, -50%); overflow-y: auto; } /* Defensive fluidity for real WordPress content: long titles, embeds, tables, forms and user-supplied media must never widen the viewport. */ html, body, .site, main { max-width: 100%; } html, body { overflow-x: clip; } .frame, .wideFrame, .leadGrid, .afterLead, .contentLayout, .categoryLead, .categoryBody, .categoryLower, .categorySidebar, .articleColumns, .articleSidebar, .infoPage__layout, .infoArticle, .newsletter, .trending, .categoryTrending { min-width: 0; } .entryContent img, .entryContent video, .entryContent iframe, .entryContent embed, .entryContent object, .wp-block-embed, .wp-block-image, .wp-block-video { max-width: 100%; } .featuredCard__copy h1, .featuredCard__copy h2, .storyCard__copy h2, .trendItem h3, .categoryTrend h3, .articleFeature__title h1, .infoPage__hero h1 { overflow-wrap: anywhere; } @media (max-width: 1280px) { :root { --frame: min(1254px, calc(100vw - 32px)); --wide-frame: calc(100vw - 32px); } .home .trendItem, .categoryPage .categoryTrend { grid-template-columns: 150px minmax(0, 1fr); min-height: 116px; } } @media (max-width: 999px) { .home .leadGrid, .home .afterLead, .home .contentLayout, .categoryPage .categoryLead, .categoryPage .categoryLower, .single-post .articleColumns, .page .infoPage:not(.infoPage--elementor) .infoPage__layout { grid-template-columns: minmax(0, 1fr); } .categoryPage .categorySidebar, .categoryPage .categoryLower--no-feed .categorySidebar { position: static; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: none; justify-self: stretch; } .home .trending__list, .categoryPage .categoryTrending { min-width: 0; } } @media (max-width: 820px) { :root { --frame: calc(100% - 24px); --wide-frame: calc(100% - 24px); } .home .leadGrid__rail, .home .afterLead__stories, .home .storyGrid, .categoryPage .categoryLead__rail, .categoryPage .categoryGrid--opening, .categoryPage .categoryGrid--compact, .categoryPage .categoryGrid--feature, .categoryPage .categoryGrid--tail, .single-post .relatedArticles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home .trending__list { grid-template-columns: minmax(0, 1fr); } .home .trendItem, .categoryPage .categoryTrend { grid-template-columns: 144px minmax(0, 1fr); min-height: 112px; } .newsletter__names { grid-template-columns: minmax(0, 1fr); } .cookieBanner { width: calc(100vw - 24px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px; } } @media (max-width: 560px) { :root { --frame: calc(100% - 20px); --wide-frame: calc(100% - 20px); } .home .leadGrid__rail, .home .afterLead__stories, .home .storyGrid, .categoryPage .categoryLead__rail, .categoryPage .categoryGrid--opening, .categoryPage .categoryGrid--compact, .categoryPage .categoryGrid--feature, .categoryPage .categoryGrid--tail, .single-post .relatedArticles__grid, .footerLinks ul { grid-template-columns: minmax(0, 1fr); } .featuredCard__copy, .home .featuredCard__copy--main, .home .featuredCard--side .featuredCard__copy, .categoryPage .categoryLead__copy { grid-template-columns: minmax(0, 1fr); } .home .trendItem, .categoryPage .categoryTrend { grid-template-columns: 132px minmax(0, 1fr); min-height: 103px; } .home .trendItem__copy, .categoryPage .categoryTrend__copy { padding: 10px; } .cookieBanner { width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); padding: 16px; } .cookieBanner__actions { grid-template-columns: minmax(0, 1fr); } .cookieBanner__actions .is-primary { grid-column: auto; } .cookieBanner button { width: 100%; } .entryContent .wp-block-table, .entryContent .wp-block-table table { max-width: 100%; } } @media (max-width: 360px) { .home .trendItem, .categoryPage .categoryTrend { grid-template-columns: 112px minmax(0, 1fr); } .home .trendItem h3, .categoryPage .categoryTrend h3 { font-size: 13px; } } /* Factelle 2.2.2: targeted desktop category and Trending corrections. */ @media (min-width: 821px) { /* Preserve the approved thumbnail box while eliminating the exposed grey media backing that appeared as strips around desktop Trending images. */ .home .trendItem__image, .categoryPage .categoryTrend__media { background: transparent; } .home .trendItem__image img, .categoryPage .categoryTrend__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; } } @media (min-width: 1100px) { /* Keep Stay Updated aligned and proportionate when the editorial frame expands on large desktop monitors. */ .categoryPage .categoryLower { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); } } /* Factelle 2.2.0: requested consent, navigation, AFU, article and footer fixes. These selectors are intentionally limited to the reported components. */ .nav__mobileHeader { display: none; } /* Homepage AFU module reuses the existing FAA status data and page. */ .homeUpdates { margin-top: 42px; margin-bottom: 52px; } .homeUpdates__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; } .homeUpdates__heading .eyebrow { width: fit-content; margin: 0 0 6px; padding: 3px 6px; background: var(--lime); color: var(--ink); font-size: 11px; font-weight: 900; text-transform: uppercase; } .homeUpdates__heading h2 { margin: 0; font-size: clamp(28px, 3vw, 44px); line-height: 1; letter-spacing: -.05em; } .homeUpdates__heading > a { border-bottom: 1px solid currentColor; font-size: 12px; font-weight: 800; } .homeUpdates__list { border: 2px solid var(--ink); } .homeUpdate { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 68px; border-bottom: 2px solid var(--ink); padding: 14px 18px; color: #fff; } .homeUpdate:last-child { border-bottom: 0; } .homeUpdate--good { background: #167c43; } .homeUpdate--delay { background: #c87400; } .homeUpdate--severe { background: #b41519; } .homeUpdate strong { font-size: 21px; } .homeUpdate strong span { margin-left: 10px; font-size: 15px; font-weight: 600; } .homeUpdate b { padding: 8px 11px; background: rgb(0 0 0 / 18%); font-size: 14px; } /* Summary copy and controls must remain visible regardless of entry-content rules. */ .single-post .articleContent .aiSummary .eyebrow { display: block; width: auto; margin: 0 0 7px !important; padding: 0; background: transparent; color: var(--lime); opacity: 1; visibility: visible; font-size: 10px; line-height: 1.2; } .single-post .articleContent .aiSummary h2 { display: block; margin: 0 0 8px; color: #fff; opacity: 1; visibility: visible; } .single-post .aiSummary__actions, .single-post .aiSummary__actions button { opacity: 1; visibility: visible; } /* Desktop keeps the approved pre-2.2 footer placement; mobile retains 2.2.0. */ .siteFooter__brandColumn { min-width: 0; } .socials--mobile { display: none; } /* Mobile newsletter appears only when JavaScript reveals it after consent. */ .newsletterPopup[hidden] { display: none; } .newsletterPopup { display: none; } @media (max-width: 820px) { /* Reference-style utility strip: weather left, U.S. service updates right. */ .utility { height: 48px; font-size: 13px; } .utility__inner { justify-content: space-between; padding-inline: 0; } .utility__weather i, .utility__weather [data-weather-condition] { display: none; } .utility__weather b { font-size: 15px; } .utility__weather [data-weather-location] { display: inline; margin-left: 6px; font-size: 12px; white-space: nowrap; } .utility__weather [data-weather-location]::before { content: "· "; } .utility__updates { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; } /* Logo uses the same left edge as content; search and menu align right. */ .masthead__top { grid-template-columns: minmax(0, 1fr) 48px 48px; gap: 4px; min-height: 78px; } .siteBrand { grid-column: 1; grid-row: 1; justify-self: start; width: auto; } .siteBrand .brand, .siteBrand .custom-logo-link { justify-content: flex-start; width: 116px; min-width: 116px; } .siteBrand .brandLogo, .siteBrand .custom-logo { width: 116px; max-width: 116px; max-height: 58px; } .masthead__tools { grid-column: 2; grid-row: 1; justify-self: stretch; } .masthead__tools .searchButton { width: 48px; min-height: 48px; } .masthead__tools .searchButton > span:first-child { font-size: 29px; line-height: 1; } .menuButton { grid-column: 3; grid-row: 1; width: 48px; min-height: 48px; padding: 7px; } .menuButton i { height: 4px; margin: 7px 0; } /* Full-screen, scrollable navigation with clean top actions and close. */ html.mobileMenuOpen { overflow: hidden; } .masthead .nav { position: fixed; inset: 0; z-index: 600; display: none; width: 100%; height: 100vh; height: 100dvh; border: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--lime); } .masthead .nav.nav--open { display: block; } .masthead .nav__inner { display: block; width: min(100%, 760px); min-height: 100%; margin-inline: auto; padding: 24px max(20px, env(safe-area-inset-right)) 42px max(20px, env(safe-area-inset-left)); } .nav__mobileHeader { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid rgb(23 25 22 / 35%); padding-bottom: 22px; } .nav__mobileActions { display: flex; flex-wrap: wrap; gap: 4px; } .masthead .nav .nav__mobileActions a { border: 0; padding: 9px 12px 8px; background: var(--ink); color: var(--lime); font-size: 12px; font-weight: 900; line-height: 1; text-transform: uppercase; } .nav__close { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border: 0; padding: 0; background: transparent; color: var(--ink); font-size: 48px; font-weight: 300; line-height: 1; cursor: pointer; } .masthead .nav ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 52px 0 0; } .masthead .nav li { min-width: 0; } .masthead .nav li > a { display: block; border: 0; border-bottom: 1px solid rgb(23 25 22 / 22%); padding: 17px 2px 15px; font-size: clamp(25px, 7vw, 34px); font-weight: 800; line-height: 1.05; white-space: normal; } /* AFU rows remain readable and contained on narrow phones. */ .homeUpdates { margin-top: 30px; margin-bottom: 38px; } .homeUpdates__heading { align-items: flex-start; flex-direction: column; gap: 12px; } .homeUpdates__heading h2 { font-size: 29px; } .homeUpdate { grid-template-columns: minmax(0, 1fr); gap: 9px; min-height: 0; padding: 14px; } .homeUpdate strong { font-size: 18px; } .homeUpdate strong span { display: block; margin: 3px 0 0; font-size: 13px; } .homeUpdate b { width: fit-content; font-size: 12px; } /* Mobile privacy panel follows the white reference treatment and never escapes the viewport. */ .cookieBanner { top: 50%; right: auto; bottom: auto; left: 50%; width: min( calc(100vw - 28px), 520px ); max-height: calc(100dvh - 28px); transform: translate(-50%, -50%); grid-template-columns: minmax(0, 1fr); gap: 20px; border: 0; padding: 26px 22px 22px; overflow-y: auto; background: #fff; color: var(--ink); box-shadow: 0 0 0 100vmax rgb(0 0 0 / 62%), 0 14px 40px rgb(0 0 0 / 32%); } .cookieBanner strong { color: var(--ink); font-size: 25px; text-align: center; } .cookieBanner p { font-size: 15px; line-height: 1.42; text-align: center; } .cookieBanner p a { color: var(--ink); } .cookieBanner__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; } .cookieBanner button { width: 100%; min-height: 48px; border: 2px solid var(--ink); color: var(--ink); font-size: 14px; } .cookieBanner .is-primary { order: -2; background: var(--lime); color: var(--ink); } .cookieBanner [data-cookie-manage] { order: -1; background: #fff; } .cookieBanner [data-cookie-reject] { border: 0; min-height: 36px; text-decoration: underline; } /* Newsletter appears after the privacy choice and can always be dismissed. */ html.newsletterPopupOpen { overflow: hidden; } .newsletterPopup { position: fixed; inset: 0; z-index: 550; display: grid; align-items: center; padding: 14px; overflow-y: auto; background: rgb(0 0 0 / 56%); } .newsletterPopup__panel { position: relative; width: min(100%, 560px); max-height: calc(100dvh - 28px); margin: auto; overflow-y: auto; border-radius: 18px; background: #fff; box-shadow: 0 18px 50px rgb(0 0 0 / 34%); } .newsletterPopup__close { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; border: 0; padding: 0; background: transparent; color: var(--ink); font-size: 36px; line-height: 1; cursor: pointer; } .newsletterPopup .newsletter { min-height: 0; padding: 30px 22px 24px; background: #fff; color: var(--ink); } .newsletterPopup .newsletter h2 { max-width: calc(100% - 50px); font-size: 29px; } .newsletterPopup .newsletter p { max-width: 100%; font-size: 14px; } .newsletterPopup .newsletter input[type="text"], .newsletterPopup .newsletter input[type="email"] { background: #fff; } .newsletterPopup .newsletter button[type="submit"] { background: var(--lime); color: var(--ink); } /* Footer link geometry is unchanged; social row follows it on both layouts. */ .socials--desktop { display: none; } .socials--mobile { display: flex; margin-top: 12px; } /* Fill mobile Trending media boxes cleanly; desktop keeps its earlier treatment. */ .home .trendItem__image, .categoryPage .categoryTrend__media { background: transparent; } .home .trendItem__image img, .categoryPage .categoryTrend__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; } } @media (max-width: 360px) { .utility { font-size: 11px; } .utility__weather b, .utility__updates { font-size: 12px; } .utility__weather [data-weather-location] { font-size: 10px; } .masthead__top { grid-template-columns: minmax(0, 1fr) 44px 44px; } .masthead__tools .searchButton, .menuButton { width: 44px; min-height: 44px; } .siteBrand .brand, .siteBrand .custom-logo-link, .siteBrand .brandLogo, .siteBrand .custom-logo { width: 104px; min-width: 104px; max-width: 104px; } .newsletterPopup .newsletter__names { grid-template-columns: minmax(0, 1fr); } .cookieBanner { width: calc(100vw - 20px); padding: 22px 17px 18px; } } /* Factelle 2.1.1: one authoritative final geometry and containment layer. */ /* Figma nodes 1:510, 6:1900, 5:678 and 26:4944 all use the same 1,254px editorial frame. Keep that frame exact while allowing only the outer site chrome to breathe on larger monitors, as the reference publication does. */ @media (min-width: 1600px) { :root { --frame: min(1254px, calc(100vw - 96px)); --wide-frame: min(1500px, calc(100vw - 96px)); } .single-post .articleColumns, .page .infoPage:not(.infoPage--elementor) .infoPage__layout { justify-content: normal; } } /* The policy label, title, copy and standards navigation must always begin from one shared edge. This also neutralises the earlier wide-screen centring rule that shifted the body inward while leaving the title behind. */ .page .infoPage:not(.infoPage--elementor) .infoPage__heroInner, .page .infoPage:not(.infoPage--elementor) .infoPage__layout { width: var(--frame); margin-inline: auto; } /* Final narrow-screen containment. These rules do not change the approved composition; they ensure real WordPress content cannot force any page wider than the device or squeeze controls into each other. */ @media (max-width: 560px) { .articleMetaBar, .articleMetaBar > *, .articleShare, .cookieBanner, .cookieBanner__actions, .newsletter, .newsletter form, .helpForm, .infoArticle, .trustNav { min-width: 0; max-width: 100%; } .articleMetaBar > *, .cookieBanner button, .newsletter input, .newsletter button, .helpForm input, .helpForm textarea, .helpForm button { overflow-wrap: anywhere; } .entryContent .wp-block-table { overflow-x: auto; overscroll-behavior-inline: contain; } } /* Factelle 2.1.2: consolidated wide-screen and mobile density correction. The 1,440px Figma master remains exact. Above it the editorial frame grows smoothly like the reference publication; below it every template shares one gutter and one compact mobile card rhythm. */ @media (min-width: 1440px) { :root { --frame: clamp(1254px, calc(100vw - 186px), 1599px); --wide-frame: var(--frame); } } /* Keep tablet-sized pages out of cramped desktop sidebars. */ @media (min-width: 1000px) and (max-width: 1099px) { .home .leadGrid, .home .afterLead, .home .contentLayout, .categoryPage .categoryLead, .categoryPage .categoryLower, .single-post .articleColumns, .page .infoPage:not(.infoPage--elementor) .infoPage__layout { grid-template-columns: minmax(0, 1fr); } .home .leadGrid__rail, .categoryPage .categoryLead__rail, .single-post .articleSidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home .trending, .categoryPage .categorySidebar, .single-post .articleSidebar, .page .infoPage:not(.infoPage--elementor) .trustNav { position: static; } .categoryPage .categorySidebar, .categoryPage .categoryLower--no-feed .categorySidebar { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: none; } } @media (max-width: 820px) { :root { --frame: calc(100% - 28px); --wide-frame: calc(100% - 28px); } .single-post .articlePage .frame, .single-post .articleMetaBar, .single-post .articleColumns { width: var(--frame); } } @media (max-width: 680px) { :root { --frame: calc(100% - 28px); --wide-frame: calc(100% - 28px); } /* Homepage cards: shorter media, compact copy and one shared edge. */ .home .headerStudy { padding-top: 10px; padding-bottom: 34px; } .home .leadGrid, .home .leadGrid__rail, .home .afterLead__stories, .home .storyGrid { grid-template-columns: minmax(0, 1fr); gap: 16px; } .home .leadGrid { width: var(--frame); } .home .leadGrid__rail { padding-inline: 0; } .home .featuredCard__image--main, .home .featuredCard--side .featuredCard__image, .home .afterLead .storyCard__media, .home .storyGrid .storyCard__media { aspect-ratio: 16 / 9; } .home .featuredCard__copy--main { min-height: 0; margin-inline: 0; padding: 15px 16px 14px; gap: 11px; } .home .featuredCard__copy h1 { font-size: 27px; line-height: 1.04; letter-spacing: -.045em; } .home .featuredCard--side .featuredCard__copy, .home .afterLead .storyCard__copy { min-height: 0; padding: 13px 14px; gap: 10px; } .home .featuredCard--side .featuredCard__copy h2, .home .afterLead .storyCard__copy h2 { font-size: 18px; line-height: 1.12; letter-spacing: -.035em; } .home .afterLead { gap: 18px; padding: 28px 0 36px; } .home .contentLayout { gap: 28px; padding-bottom: 54px; } .home .newsSection { padding-bottom: 39px; } .home .sectionHeading { min-height: 0; margin-bottom: 14px; padding-bottom: 6px; } .home .sectionHeading h2 { font-size: 21px; } .home .storyGrid .storyCard__copy { min-height: 0; padding: 13px 14px 14px; } .home .storyGrid .storyCard__copy h2 { font-size: 18px; line-height: 1.12; -webkit-line-clamp: 3; } /* Category archives follow the same phone-sized card system. */ .categoryPage .categoryHero { padding-top: 14px; padding-bottom: 38px; } .categoryPage .categoryTitle { min-height: 0; margin-bottom: 18px; } .categoryPage .categoryTitle h1 { font-size: 28px; } .categoryPage .categoryTitle p { margin-top: 9px; font-size: 13px; } .categoryPage .categoryLead, .categoryPage .categoryLead__rail, .categoryPage .categoryGrid--opening, .categoryPage .categoryGrid--compact, .categoryPage .categoryGrid--feature, .categoryPage .categoryGrid--tail { grid-template-columns: minmax(0, 1fr); gap: 18px; } .categoryPage .categoryLead__main .categoryLead__media, .categoryPage .categoryLead__side .categoryLead__media, .categoryPage .categoryGrid--opening .storyCard__media, .categoryPage .categoryGrid--compact .storyCard__media, .categoryPage .categoryGrid--feature .storyCard__media, .categoryPage .categoryGrid--tail .storyCard__media { aspect-ratio: 16 / 9; } .categoryPage .categoryLead__main .categoryLead__copy, .categoryPage .categoryLead__side .categoryLead__copy, .categoryPage .categoryGrid--opening .storyCard__copy, .categoryPage .categoryGrid--compact .storyCard__copy, .categoryPage .categoryGrid--feature .storyCard__copy, .categoryPage .categoryGrid--tail .storyCard__copy { min-height: 0; padding: 13px 14px 14px; gap: 10px; } .categoryPage .categoryLead__main .categoryLead__copy h2 { font-size: 25px; line-height: 1.05; } .categoryPage .categoryLead__side .categoryLead__copy h2, .categoryPage .categoryGrid--opening .storyCard__copy h2, .categoryPage .categoryGrid--compact .storyCard__copy h2, .categoryPage .categoryGrid--feature .storyCard__copy h2, .categoryPage .categoryGrid--tail .storyCard__copy h2 { font-size: 18px; line-height: 1.12; } .categoryPage .categoryBody { padding-top: 38px; } .categoryPage .categoryGrid--opening, .categoryPage .categoryGrid--compact { margin-bottom: 38px; } .categoryPage .categoryLower { gap: 38px; padding-top: 38px; } .categoryPage .categoryGrid--tail { margin-top: 38px; } /* Compact newsletter fields without reducing their touch size. */ .home .newsletter, .categoryPage .categorySidebar .newsletter, .single-post .articleSidebar .newsletter { min-height: 0; padding: 18px 16px; } .home .newsletter h2, .categoryPage .categorySidebar .newsletter h2, .single-post .articleSidebar .newsletter h2 { margin-bottom: 8px; font-size: 26px; line-height: 1; } .home .newsletter p, .categoryPage .categorySidebar .newsletter p, .single-post .articleSidebar .newsletter p { margin-bottom: 12px; font-size: 13px; } .newsletter__names, .home .newsletter__names, .categoryPage .categorySidebar .newsletter__names, .single-post .articleSidebar .newsletter__names { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 0 !important; margin-bottom: 7px; } .newsletter > label { margin-bottom: 7px; } .newsletter input[type="text"], .newsletter input[type="email"], .home .newsletter input[type="text"], .home .newsletter input[type="email"], .categoryPage .categorySidebar .newsletter input[type="text"], .categoryPage .categorySidebar .newsletter input[type="email"] { min-height: 42px; padding: 8px 9px; font-size: 13px; } .newsletter__consent { margin-bottom: 10px !important; font-size: 11px; } .newsletter button, .home .newsletter button, .categoryPage .categorySidebar .newsletter button { min-height: 42px; } /* Trending keeps the whole image but uses its native editorial proportion, eliminating the gray letterbox that made thumbnails appear undersized. */ .home .trending > h2, .categoryPage .categoryTrending > h2 { margin-bottom: 7px; font-size: 25px; line-height: 1; } .home .trendItem, .categoryPage .categoryTrend { grid-template-columns: minmax(128px, 42%) minmax(0, 1fr); min-height: 0; padding: 8px 0; } .home .trendItem__image, .categoryPage .categoryTrend__media { aspect-ratio: 16 / 9; } .home .trendItem__copy, .categoryPage .categoryTrend__copy { padding: 8px 0 8px 12px; } .home .trendItem h3, .categoryPage .categoryTrend h3 { margin-bottom: 6px; font-size: 15px; line-height: 1.1; -webkit-line-clamp: 3; } .trendItem__byline, .categoryPage .categoryTrend .trendItem__byline { font-size: 9px; } .trendItem__byline b, .categoryPage .categoryTrend .trendItem__byline b { font-size: 10px; } /* Card bylines stay readable but no longer create a second oversized row. */ .cardAuthor, .featuredCard__copy .cardAuthor, .home .featuredCard__copy--main .cardAuthor, .home .featuredCard--side .cardAuthor, .home .afterLead .cardAuthor, .categoryPage .categoryLead .cardAuthor { grid-template-columns: 28px minmax(0, 1fr); gap: 7px; min-width: 0; width: 100%; max-width: 180px; align-items: center; } .cardAuthor__avatar, .home .featuredCard__copy--main .cardAuthor__avatar, .home .featuredCard--side .cardAuthor__avatar, .home .afterLead .cardAuthor__avatar, .categoryPage .categoryLead .cardAuthor__avatar { width: 28px; height: 28px; } .cardAuthor small { font-size: 9px; line-height: 1.1; } .cardAuthor b { font-size: 10px; } /* Article and policy reading pages use the same gutter and calmer titles. */ .single-post .articleFeature__media { aspect-ratio: 16 / 9; } .single-post .articleFeature__title { margin-top: -42px; padding: 15px 16px 16px; } .single-post .articleFeature__title h1 { font-size: 28px; line-height: 1.04; } .single-post .entryContent > table { display: block; width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; } .single-post .articleSidebar, .single-post .relatedArticles__grid { grid-template-columns: minmax(0, 1fr); } .page .infoPage:not(.infoPage--elementor) .infoPage__hero h1 { font-size: clamp(36px, 11vw, 46px); line-height: .96; } /* Keep the footer compact and preserve the intentionally hidden phone logo. */ .siteFooter__inner { gap: 10px; padding: 22px 0 18px; } .footerBrand, .footerBrand__logo { display: none; } .socials { margin-top: 0; } .footerLinks { padding: 0 0 12px; } .footerLinks ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; } .footerLinks a { min-height: 32px; padding: 6px 0; font-size: 11px; } .copyright { margin-top: 6px; font-size: 11px; } } @media (max-width: 360px) { .newsletter__names, .home .newsletter__names, .categoryPage .categorySidebar .newsletter__names, .single-post .articleSidebar .newsletter__names { grid-template-columns: minmax(0, 1fr); } .home .trendItem, .categoryPage .categoryTrend { grid-template-columns: 116px minmax(0, 1fr); } } /* Factelle 2.2.3: final desktop-only editorial alignment corrections. This is intentionally the last desktop layer so older release rules cannot override it. Mobile and tablet geometry remain unchanged. */ @media (min-width: 1000px) { .categoryPage .categoryLower--sparse { display: block; } .categoryPage .categoryLower--sparse .categoryGrid--feature { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 1390px; margin-inline: auto; } .categoryPage .categoryLower--sparse .categorySidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 1390px; margin: 58px auto 0; } /* Factelle thumbnails are generated at 360 x 220. Matching that ratio removes both exposed backing and the crop caused by the previous 4:3 box. */ .home .trendItem__image, .categoryPage .categoryTrend__media { aspect-ratio: 18 / 11; background: transparent; } .home .trendItem__image img, .categoryPage .categoryTrend__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* One centred 1,092px wrapper for article title, metadata, body and rail. */ .single-post .articleFeature__title, .single-post .articleMetaBar, .single-post .articleColumns { width: min(1092px, calc(100vw - 96px)); margin-inline: auto; } .single-post .articleFeature__title { right: 0; left: 0; transform: none; } .single-post .articleMetaBar { grid-template-columns: minmax(0, 1.25fr) minmax(0, .7fr) minmax(0, .65fr) minmax(0, 1fr); } .single-post .articleColumns { grid-template-columns: minmax(0, 752px) minmax(260px, 300px); gap: 40px; justify-content: center; } .single-post .articleContent { max-width: 752px; } .single-post .articleSidebar { width: 100%; max-width: 300px; } /* FAQs and managed information pages share that centred inner wrapper. */ .page .infoPage:not(.infoPage--elementor) .infoPage__heroInner, .page .infoPage:not(.infoPage--elementor) .infoPage__layout { width: min(1092px, calc(100vw - 96px)); margin-inline: auto; } .page .infoPage:not(.infoPage--elementor) .infoPage__layout { grid-template-columns: minmax(0, 752px) minmax(260px, 300px); gap: 40px; justify-content: center; } .page .infoPage:not(.infoPage--elementor) .infoArticle { max-width: 752px; } .page .infoPage:not(.infoPage--elementor) .trustNav { width: 100%; max-width: 300px; } } /* Factelle 2.2.4: three narrowly scoped live-site corrections. Keep the approved sparse-category cards and all phone/tablet geometry intact. */ @media (min-width: 1100px) { .categoryPage .categoryLower--sparse .categorySidebar { grid-template-columns: minmax(0, 1fr); width: min(400px, 100%); max-width: 400px; margin: 58px max(0px, calc((100% - 1390px) / 2)) 0 auto; } } @media (min-width: 821px) { .searchPanel__inner > .searchForm { width: calc(100% - 58px); } .searchPanel__close { top: calc(50% - 4px); right: 0; } }