/* ix-article-v1_0_10.css INBXIFY · Article page on the site shell. Pairs with ix-article-v1_0_13.js v1.0.10 (30 Oct 2026, Franchise Bands S2) .ixr-amark, the Accent mark: a 52 by 2 line in the title's Accent, centred above the headline of an article with no band. Size typed here like the band's sizes (provisional HC-P-FB2-5; the newsletter reads the same 52 by 2 from the platform tokens). Nothing else changed. v1.0.9 (30 Oct 2026, Article franchise bands) The band tile's balance is Even (Jeff, 30 Oct), for Themed Spotlight and Feature Article alike: the words 90% of the badge's height, the pair centred in the band. Desktop: badge 110 round, wordmark 99 tall, gap 24. Phones: badge 68, wordmark 61, gap 15. Was badge 150 / words 64 (116 / 46 on phones), which left the words at 43% of the badge. The band link is never underlined, whichever form it takes. Fixed sizes: HC-P-CB-17. v1.0.8 (29 Oct 2026, Code-Built Site S6g) The band tile and the article tile (.ixr-ts--mascot): the franchise band as an inset tile in its band colour with a white frame and a shadow; the badge at 150 round (116 phone) on a white fill beside the wordmark 64 tall (46 phone), or the name in the display face; left aligned on desktop, one centred row on phones. The band takes --ixr-ts-bg (Band Colour), else Main. Every article body sits on a white tile (.ixr-tile) under whatever is above it (nothing, the band, the band tile, or the tag pill). v1.0.6 (28 Oct 2026, Code-Built Site S6) More room between the section banner (or the plate band) and the headline, so the story reads as a story: 64px on desktop (was 46), 48px on phones (was 28). v1.0.5 (28 Oct 2026, Code-Built Site S4) Lightbox photo sized by the screen: up to the full width and the screen height less room for the caption and controls, never squeezed by the box around it. Caption directly under the photo, larger (17, 15 on phones). A photo essay's intro body sits between the byline and the photos, with room before the first card. and ix-shell-v1_0_3.css (load the shell file first). v1.0.4 (28 Oct 2026, Code-Built Site S4) Photo essay treatments. Shared: the gallery column, the scroll reveal and the lightbox, all on the title's colours and fonts. Treatment POLAROID, carried over from the old template's article-photo-essay-head-v1_0: white card with an even border and a deep caption chin, soft shadow, five tilts in a repeating order, every third card full width and the others inset to 74% (88% under 768px), straight cards under 480px, a lift on hover. The old file's typed teal, gold and Spectral / DM Mono become the title's Main, Accent, Body and UI. A new treatment is a new section here keyed on .ixr-gallery--. v1.0.3 (28 Oct 2026, Code-Built Site S4) Subtitle under the headline; the "Sponsored" label beside the FA badge; the buyer's ad after the byline; the photo essay gallery (full column photos, caption under each); byline as "Name, Title" on one line with the company beneath in the UI font (logo only for an Expert Contributor). v1.0.2 (28 Oct 2026, Code-Built Site S4) Byline for one or two writers with titles (two equal 260 columns split by an Accent rule; stacked on phones), the Expert Contributor / business line, the photo credit, and the video poster, play button, 16:9 player and "Close video" link. v1.0.1 (28 Oct 2026, Code-Built Site S4) Rewritten for the shell. Page frame review v0.7: column 760 on paper (A2 A), headline in Main (A3 A), FA badge (T1 B), TS banner joined under the plate (T2 A), sponsor ad at the end (T3 A), three recent plus See more (T4 A). The body typography from the template head (article-rte-head v1.2.6) moves here, on the title's fonts and colours instead of typed ones. The old head block is retired with this file. v1.0.0 (27 Oct 2026) Site Chrome version; never installed. WHERE EVERY VALUE COMES FROM Colours: the title's TITLES values (--ix-t-*), set by the shell. Fonts: TITLES Display, Body and UI fonts (--ixs-display, --ixs-body, --ixs-ui), set by the shell. Platform values (hardcoding, provisional HC-P-CB-17): the reading sizes below (headline 44/30, body 18/17/16, spacing), the image size steps 33/50/75/100 that match Studio's buttons (HC-IMG-001), and the Trix leak rules (HC-RTE-LEAK-001), both carried over. SCOPE AND ARMOUR Every rule sits under #ix-root .ixr. Webflow's site-wide heading and text rules carry !important, so the body text rules here do too; the #ix-root id makes them win. The shell's resets skip the hosted text (.ixs-host), so nothing else reaches it. LOAD (ARTICLES template, Inside , after the shell CSS) */ #ix-root .ixr{ --ixr-main: var(--ix-t-main); --ixr-acc: var(--ix-t-accent); --ixr-text: var(--ixs-text-c, #333333); --ixr-mute: color-mix(in srgb, var(--ixr-text) 66%, transparent); --ixr-line: color-mix(in srgb, var(--ix-t-main) 16%, transparent); --ixr-card: color-mix(in srgb, var(--ix-t-paper) 70%, #fff); --ixr-body-size: 18px; --ixr-body-lh: 1.75; --ixr-gap: 22px; display: block; background: transparent; color: var(--ixr-text); } #ix-root .ixr *, #ix-root .ixr *::before, #ix-root .ixr *::after{ box-sizing: border-box; } /* Before the layout runs, the hosted words never overflow the column */ #ix-root .ixs-paper--article .ixs-host:not(.ixr) img{ max-width: 100% !important; height: auto !important; } /* ── TS banner joined under the plate (T2 A) ── */ #ix-root .ixr-top{ background: var(--ix-t-paper); } #ix-root .ixr-ts{ display: block; line-height: 0; background: var(--ixr-main); } #ix-root a.ixr-ts{ text-decoration: none; } /* v1.0.9 */ #ix-root .ixr-ts-img{ display: block; width: 100%; height: auto; } #ix-root .ixr-ts--words{ display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 20px 30px; line-height: 1; } #ix-root .ixr-ts-name{ font: italic 700 44px/1 var(--ixs-display); color: #fff; text-align: center; } /* v1.0.8 · treatment 3 on the article: the franchise band as an inset tile */ #ix-root .ixr-ts--mascot{ --ixr-ts-bg: var(--ixr-main); display: flex; align-items: center; justify-content: center; gap: 24px; margin: 24px 24px 0; padding: 18px 24px; min-height: 0; line-height: normal; background: var(--ixr-ts-bg); border: 6px solid #fff; border-radius: 16px; box-shadow: 0 6px 20px rgba(0,0,0,.12); text-decoration: none; } #ix-root .ixr-ts-mascot{ flex: 0 0 auto; width: 110px; height: 110px; padding: 8px; border-radius: 50%; background: #fff; border: 4px solid #fff; box-shadow: 0 6px 16px rgba(0,0,0,.16); object-fit: contain; } #ix-root .ixr-ts-wordmark{ display: block; height: 99px; width: auto; max-width: calc(100% - 134px); object-fit: contain; object-position: left center; } #ix-root .ixr-ts-name--mascot{ font: 600 34px/1.1 var(--ixs-display); font-style: normal; color: #fff; text-align: left; } #ix-root .ixr-ts--light .ixr-ts-name--mascot{ color: var(--ix-t-main); } /* v1.0.8 · the article on a white tile, set off from the band (as the newsletter is) */ #ix-root .ixr-tile{ margin: 28px 28px 0; background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 24px rgba(0,0,0,.05); } #ix-root .ixr-presented{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; padding: 12px 20px; border-bottom: 1px solid var(--ixr-line); font: 400 13px/1.3 var(--ixs-ui); color: var(--ixr-mute); } #ix-root .ixr-art .ixr-presented{ border: 0; padding: 0 0 18px; } #ix-root .ixr-presented-l{ font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } #ix-root .ixr-presented-n{ font: 600 15px/1.3 var(--ixs-ui); color: var(--ixr-text); text-decoration: none; } #ix-root a.ixr-presented-n:hover{ color: var(--ixr-main); } /* ── The article on paper ── */ #ix-root .ixr-art{ display: block; padding: 64px 70px 50px; text-align: center; } /* v1.0.6: room above the headline */ #ix-root .ixr-badge{ display: inline-block; margin: 0 0 20px; padding: 8px 16px; border-radius: 999px; background: var(--ixr-main); color: #fff; font: 600 12px/1 var(--ixs-ui); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; } #ix-root .ixr-art h1.ixr-h{ margin: 0 !important; padding: 0 !important; font-family: var(--ixs-display) !important; font-size: 44px !important; font-weight: 600 !important; line-height: 1.15 !important; letter-spacing: normal !important; text-transform: none !important; color: var(--ixr-main) !important; text-align: center !important; } #ix-root .ixr-by{ margin-top: 22px; } #ix-root .ixr-by-l{ font: 600 11px/1 var(--ixs-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ixr-mute); } #ix-root .ixr-by-n{ margin-top: 8px; font: 400 22px/1.25 var(--ixs-body); color: var(--ixr-main); } /* v1.0.2 · writers: one centred, or two equal fixed columns split by an Accent rule */ #ix-root .ixr-writers{ display: flex; justify-content: center; } #ix-root .ixr-writer{ width: 260px; padding: 0 18px; min-width: 0; } #ix-root .ixr-writers--two .ixr-writer + .ixr-writer{ border-left: 2px solid var(--ixr-acc); } /* v1.0.3 · "Name, Title" on one line; the title lighter, in the same face */ #ix-root .ixr-by-t{ font: inherit; font-style: italic; color: var(--ixr-mute); } #ix-root .ixr-writers:not(.ixr-writers--two) .ixr-writer{ width: auto; max-width: 100%; } #ix-root .ixr-biz{ display: inline-flex; align-items: center; gap: 12px; margin-top: 10px; text-align: left; } #ix-root .ixr-biz-logo{ display: block; height: 32px; width: auto; max-width: 120px; object-fit: contain; } #ix-root .ixr-biz-ec{ font: 700 10.5px/1.2 var(--ixs-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ix-t-highlight, var(--ixr-acc)); } #ix-root .ixr-biz-n{ font: 600 13px/1.3 var(--ixs-ui); letter-spacing: .08em; color: var(--ixr-text); } /* v1.0.3 · tags row (FA badge, Sponsored), subtitle, buyer's ad, gallery */ #ix-root .ixr-tags{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 0 0 20px; } #ix-root .ixr-tags .ixr-badge{ margin: 0; } #ix-root .ixr-paidtag{ display: inline-block; padding: 7px 14px; border: 1.5px solid var(--ixr-mute); border-radius: 999px; font: 700 11px/1 var(--ixs-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ixr-mute); } #ix-root .ixr-art h3.ixr-sub, #ix-root .ixr-art .ixr-sub{ margin: 12px 0 0 !important; padding: 0 !important; font-family: var(--ixs-body) !important; font-size: 21px !important; font-weight: 400 !important; font-style: italic !important; line-height: 1.4 !important; letter-spacing: normal !important; text-transform: none !important; color: var(--ixr-text) !important; text-align: center !important; } #ix-root .ixr-buyer{ margin: 22px 0 0; padding: 16px; border: 1px solid var(--ixr-line); border-radius: 8px; background: var(--ixr-card); text-align: left; } /* ── v1.0.4 · Photo essay: shared gallery (every treatment) ── */ #ix-root .ixr-gallery{ display: flex; flex-direction: column; align-items: center; gap: 44px; margin: 8px 0 36px; } #ix-root .ixr-body--intro{ margin-bottom: 40px; } #ix-root .ixr-gitem{ width: 100%; display: flex; justify-content: center; } #ix-root .ixr-gcard{ margin: 0; padding: 0; max-width: 100%; cursor: zoom-in; } #ix-root .ixr-gcard:focus-visible{ outline: 3px solid var(--ixr-acc); outline-offset: 4px; } #ix-root .ixr-gimg{ display: block; width: 100%; height: auto; image-orientation: from-image; } #ix-root .ixr-gcap{ font: italic 400 15px/1.45 var(--ixs-body); color: var(--ixr-mute); text-align: center; } #ix-root .ixr-gcap:empty{ display: none; } #ix-root .ixr-gallery .ixr-credit{ margin-top: -20px; } /* Scroll reveal: the script adds .ixr-in; each treatment can restyle it. */ #ix-root .ixr-gitem{ opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; } #ix-root .ixr-gitem.ixr-in{ opacity: 1; transform: none; } /* ── Treatment: POLAROID (HC-P-CB-20 values) ── */ #ix-root .ixr-gallery--polaroid{ --ixr-pol-card: #ffffff; --ixr-pol-edge: color-mix(in srgb, var(--ix-t-main) 12%, #e6e2d6); --ixr-pol-shadow: 0 2px 4px color-mix(in srgb, var(--ix-t-main) 6%, transparent), 0 12px 28px color-mix(in srgb, var(--ix-t-main) 10%, transparent); --ixr-pol-shadow-up: 0 4px 8px color-mix(in srgb, var(--ix-t-main) 10%, transparent), 0 20px 44px color-mix(in srgb, var(--ix-t-main) 16%, transparent); } #ix-root .ixr-gallery--polaroid .ixr-gcard{ background: var(--ixr-pol-card); border: 1px solid var(--ixr-pol-edge); padding: 14px 14px 0; box-shadow: var(--ixr-pol-shadow); transition: transform .3s ease, box-shadow .3s ease; } #ix-root .ixr-gallery--polaroid .ixr-gimg{ background: color-mix(in srgb, var(--ix-t-paper) 80%, #e8e4d8); } #ix-root .ixr-gallery--polaroid .ixr-gcap{ display: block; font-size: 14px; padding: 12px 6px 16px; min-height: 16px; } #ix-root .ixr-gallery--polaroid .ixr-gcap:empty{ padding: 0 0 14px; min-height: 0; } /* the chin stays, shallower */ /* Size: every third card full width (the 1st, 4th, 7th ...), the rest inset. */ #ix-root .ixr-gallery--polaroid .ixr-gitem .ixr-gcard{ width: 74%; } #ix-root .ixr-gallery--polaroid .ixr-gitem:nth-child(3n+1) .ixr-gcard{ width: 100%; } /* Tilt: five angles in the old script's order (index x 7, mod 5). */ #ix-root .ixr-gallery--polaroid .ixr-gitem:nth-child(5n+1) .ixr-gcard{ transform: rotate(-2.1deg); } #ix-root .ixr-gallery--polaroid .ixr-gitem:nth-child(5n+2) .ixr-gcard{ transform: rotate(0.25deg); } #ix-root .ixr-gallery--polaroid .ixr-gitem:nth-child(5n+3) .ixr-gcard{ transform: rotate(2.3deg); } #ix-root .ixr-gallery--polaroid .ixr-gitem:nth-child(5n+4) .ixr-gcard{ transform: rotate(-1deg); } #ix-root .ixr-gallery--polaroid .ixr-gitem:nth-child(5n+5) .ixr-gcard{ transform: rotate(1.2deg); } #ix-root .ixr-gallery--polaroid .ixr-gitem .ixr-gcard:hover{ transform: rotate(0deg) scale(1.015); box-shadow: var(--ixr-pol-shadow-up); position: relative; z-index: 2; } /* ── Lightbox (shared by every treatment) ── */ #ix-root .ixr-lb{ position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px 20px; background: color-mix(in srgb, var(--ix-t-main) 94%, #000); } #ix-root .ixr-lb[hidden]{ display: none; } #ix-root .ixr-lb button{ font: inherit; -webkit-appearance: none; appearance: none; } #ix-root .ixr-lb svg{ width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #ix-root .ixr-lb-x{ position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 14px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: #fff; opacity: .8; cursor: pointer; } #ix-root .ixr-lb-x:hover, #ix-root .ixr-lb-x:focus-visible{ opacity: 1; background: color-mix(in srgb, #fff 12%, transparent); } #ix-root .ixr-lb-stage{ flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; } /* v1.0.5: sized by the screen, not by the flex box (that squeezed large photos) */ #ix-root .ixr-lb-fig{ margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; } #ix-root .ixr-lb-img{ display: block; width: auto; height: auto; max-width: min(100%, 1600px); max-height: calc(100vh - 220px); max-height: calc(100dvh - 220px); object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.5); } #ix-root .ixr-lb-bar{ flex: 0 0 auto; width: 100%; max-width: 720px; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-bottom: env(safe-area-inset-bottom, 0px); } #ix-root .ixr-lb-ctl{ display: flex; align-items: center; gap: 22px; } #ix-root .ixr-lb-nav{ width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid color-mix(in srgb, #fff 30%, transparent); background: transparent; color: #fff; cursor: pointer; } #ix-root .ixr-lb-nav:hover, #ix-root .ixr-lb-nav:focus-visible{ border-color: var(--ix-t-accent); color: var(--ix-t-accent); } #ix-root .ixr-lb-nav[hidden], #ix-root .ixr-lb-pills[hidden]{ display: none; } #ix-root .ixr-lb-count{ min-width: 82px; text-align: center; font: 600 11px/1 var(--ixs-ui); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, #fff 72%, transparent); } #ix-root .ixr-lb-cap{ max-width: 720px; margin: 0; text-align: center; font: italic 400 17px/1.45 var(--ixs-body); color: color-mix(in srgb, #fff 92%, transparent); } #ix-root .ixr-lb-cap:empty{ display: none; } #ix-root .ixr-lb-pills{ display: flex; gap: 8px; max-width: 100%; overflow-x: auto; padding: 4px 2px 2px; } #ix-root .ixr-lb-pill{ flex: 0 0 auto; width: 54px; height: 40px; padding: 0; overflow: hidden; border: 2px solid transparent; background: transparent; opacity: .45; cursor: pointer; transition: opacity .2s ease, border-color .2s ease; } #ix-root .ixr-lb-pill img{ display: block; width: 100%; height: 100%; object-fit: cover; } #ix-root .ixr-lb-pill:hover{ opacity: .8; } #ix-root .ixr-lb-pill.ixr-lb-on{ opacity: 1; border-color: var(--ix-t-accent); } @media (prefers-reduced-motion: reduce){ #ix-root .ixr-gitem{ opacity: 1; transform: none; transition: none; } #ix-root .ixr-gallery--polaroid .ixr-gcard{ transition: none; } #ix-root .ixr-gallery--polaroid .ixr-gitem .ixr-gcard:hover{ transform: none; } } #ix-root .ixr-rule{ width: 180px; height: 2px; margin: 16px auto 30px; background: var(--ixr-acc); } #ix-root .ixr-fig{ margin: 0; padding: 0; } #ix-root .ixr-img{ display: block; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 auto; border-radius: 4px; } /* v1.0.2 · photo credit */ #ix-root .ixr-credit{ margin-top: 8px; font: italic 400 13px/1.4 var(--ixs-body); color: var(--ixr-mute); text-align: center; } /* v1.0.2 · video: poster with a play button, then a 16:9 player in the same place */ #ix-root .ixr-stage{ position: relative; } #ix-root .ixr-poster{ position: relative; display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; line-height: 0; } #ix-root .ixr-poster--plain{ aspect-ratio: 16 / 9; border-radius: 4px; background: var(--ixr-main); } #ix-root .ixr-play{ position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ixr-main); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ix-t-paper) 85%, transparent), 0 0 0 6px var(--ixr-acc), 0 8px 24px rgba(0,0,0,.3); transition: transform .2s ease; } #ix-root .ixr-play svg{ width: 34px; height: 34px; margin-left: 4px; fill: #fff; stroke: none; } #ix-root .ixr-poster:hover .ixr-play, #ix-root .ixr-poster:focus-visible .ixr-play{ transform: scale(1.06); } #ix-root .ixr-player{ position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: #000; } #ix-root .ixr-player iframe, #ix-root .ixr-player video{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } #ix-root .ixr-vclose{ display: block; margin: 8px 0 0 auto; padding: 0; border: 0; background: transparent; cursor: pointer; font: 600 12px/1.4 var(--ixs-ui); color: var(--ixr-main); text-decoration: underline; text-decoration-color: var(--ixr-acc); text-underline-offset: 3px; } #ix-root .ixr-vclose[hidden]{ display: none; } /* Share */ #ix-root .ixr-share{ display: flex; align-items: center; justify-content: center; gap: 10px; margin: 22px 0 30px; } #ix-root .ixr-share-l{ font: 600 12px/1 var(--ixs-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ixr-main); margin-right: 4px; } #ix-root .ixr-sb{ position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ix-t-main) 9%, var(--ix-t-paper)); cursor: pointer; transition: background .2s ease; } #ix-root .ixr-sb svg{ width: 18px; height: 18px; fill: none; stroke: var(--ixr-main); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #ix-root .ixr-sb:hover, #ix-root .ixr-sb.ixr-ok{ background: var(--ixr-main); } #ix-root .ixr-sb:hover svg{ stroke: #fff; } #ix-root .ixr-sb.ixr-ok svg{ stroke: var(--ixr-acc); } #ix-root .ixr-tip{ position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 6px; background: var(--ixr-main); color: #fff; font: 600 12px/1 var(--ixs-ui); white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; pointer-events: none; } #ix-root .ixr-tip.ixr-show{ opacity: 1; visibility: visible; } /* ── Body text (was article-rte-head v1.2.6, now on the title's fonts) ── */ #ix-root .ixr-body{ display: block; text-align: left; font-family: var(--ixs-body) !important; font-size: var(--ixr-body-size) !important; line-height: var(--ixr-body-lh) !important; color: var(--ixr-text) !important; } #ix-root .ixr-body :where(p, div, span, li, dd, dt, td, th, caption, blockquote, address, a, strong, b, em, i, u, s, del, ins, mark, q, cite, abbr, time, label){ font-family: var(--ixs-body) !important; font-size: var(--ixr-body-size) !important; line-height: var(--ixr-body-lh) !important; } #ix-root .ixr-body p, #ix-root .ixr-body div, #ix-root .ixr-body li, #ix-root .ixr-body td{ color: var(--ixr-text) !important; } #ix-root .ixr-body p{ margin: 0 0 var(--ixr-gap) !important; } #ix-root .ixr-body strong, #ix-root .ixr-body b{ font-weight: 600 !important; color: var(--ixr-main) !important; } #ix-root .ixr-body em, #ix-root .ixr-body i, #ix-root .ixr-body cite{ font-style: italic !important; } #ix-root .ixr-body sub, #ix-root .ixr-body sup{ font-size: .72em !important; line-height: 0 !important; } #ix-root .ixr-body small{ font-size: .85em !important; line-height: 1.4 !important; } #ix-root .ixr-body a{ color: var(--ixr-main) !important; text-decoration: underline !important; text-decoration-color: var(--ixr-acc) !important; text-underline-offset: 3px !important; } #ix-root .ixr-body a:hover{ color: var(--ixr-acc) !important; } #ix-root .ixr-body blockquote{ margin: 28px 0 !important; padding: 4px 0 4px 20px !important; border-left: 3px solid var(--ixr-acc) !important; font-style: italic !important; } #ix-root .ixr-body hr{ border: 0 !important; border-top: 1px solid var(--ixr-line) !important; margin: 28px 0 !important; } #ix-root .ixr-body h1, #ix-root .ixr-body h2, #ix-root .ixr-body h3, #ix-root .ixr-body h4, #ix-root .ixr-body h5, #ix-root .ixr-body h6{ font-family: var(--ixs-display) !important; font-weight: 600 !important; color: var(--ixr-main) !important; text-transform: none !important; letter-spacing: normal !important; text-align: left !important; } #ix-root .ixr-body h1{ font-size: 34px !important; line-height: 1.18 !important; margin: 40px 0 16px !important; } #ix-root .ixr-body h2{ font-size: 28px !important; line-height: 1.22 !important; margin: 40px 0 14px !important; } #ix-root .ixr-body h3{ font-size: 23px !important; line-height: 1.3 !important; margin: 28px 0 10px !important; } #ix-root .ixr-body h4{ font-size: 20px !important; line-height: 1.35 !important; margin: 24px 0 8px !important; } #ix-root .ixr-body h5, #ix-root .ixr-body h6{ font-size: 18px !important; line-height: 1.4 !important; margin: 20px 0 8px !important; } #ix-root .ixr-body figure + h2, #ix-root .ixr-body figure + h3, #ix-root .ixr-body blockquote + h2, #ix-root .ixr-body blockquote + h3{ margin-top: 24px !important; } #ix-root .ixr-body ul{ list-style: disc !important; } #ix-root .ixr-body ul ul{ list-style: circle !important; } #ix-root .ixr-body ul ul ul{ list-style: square !important; } #ix-root .ixr-body ol{ list-style: decimal !important; } #ix-root .ixr-body ol ol{ list-style: lower-alpha !important; } #ix-root .ixr-body ol ol ol{ list-style: lower-roman !important; } #ix-root .ixr-body ul, #ix-root .ixr-body ol{ padding-left: 1.5em !important; margin: 0 0 var(--ixr-gap) !important; } #ix-root .ixr-body li{ margin: 6px 0 !important; } #ix-root .ixr-body table{ width: 100% !important; border-collapse: collapse !important; margin: 20px 0 !important; } #ix-root .ixr-body td, #ix-root .ixr-body th{ border: 1px solid var(--ixr-line) !important; padding: 8px 10px !important; text-align: left !important; vertical-align: top !important; } #ix-root .ixr-body th{ font-weight: 600 !important; color: var(--ixr-main) !important; } #ix-root .ixr-body img{ display: block !important; max-width: 100% !important; width: auto !important; height: auto !important; margin: 28px auto !important; image-orientation: from-image; } #ix-root .ixr-body figure{ margin: 32px auto !important; max-width: 100%; } #ix-root .ixr-body figure.attachment{ display: block !important; width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } #ix-root .ixr-body figure.rte-inserted-image{ display: block !important; margin: 32px auto !important; overflow: hidden; } #ix-root .ixr-body figure.rte-inserted-image img{ width: 100% !important; margin: 0 !important; } #ix-root .ixr-body figcaption{ padding: 8px 10px 0 !important; font: italic 400 14px/1.4 var(--ixs-body) !important; text-align: center !important; color: var(--ixr-mute) !important; } #ix-root .ixr-body figcaption:empty, #ix-root .ixr-body .attachment__caption:empty{ display: none !important; padding: 0 !important; margin: 0 !important; } #ix-root .ixr-body [data-trix-cursor-target], #ix-root .ixr-body [data-trix-serialize="false"]{ display: none !important; } /* HC-RTE-LEAK-001 */ #ix-root .ixr-body figure.rte-inserted-image[data-img-size="small"]{ max-width: 33% !important; } /* HC-IMG-001 */ #ix-root .ixr-body figure.rte-inserted-image[data-img-size="medium"]{ max-width: 50% !important; } #ix-root .ixr-body figure.rte-inserted-image[data-img-size="large"]{ max-width: 75% !important; } #ix-root .ixr-body figure.rte-inserted-image[data-img-size="full"]{ max-width: 100% !important; } #ix-root .ixr-body figure.rte-inserted-image[data-img-align="left"]{ margin-left: 0 !important; margin-right: auto !important; } #ix-root .ixr-body figure.rte-inserted-image[data-img-align="right"]{ margin-left: auto !important; margin-right: 0 !important; } /* ── End of the article: sponsor ad (T3 A), more (T4 A) ── */ #ix-root .ixr-tail{ text-align: center; } #ix-root .ixr-sponsor{ margin-top: 30px; padding: 20px; border: 1px solid var(--ixr-line); border-radius: 8px; background: var(--ixr-card); } #ix-root .ixr-sponsor-l{ margin-bottom: 14px; font: 600 11px/1.3 var(--ixs-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ixr-mute); } #ix-root .ixr-sponsor-a{ display: block; line-height: 0; } #ix-root .ixr-sponsor-img{ display: block; width: 100%; height: auto; border-radius: 4px; } #ix-root .ixr-more{ margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--ixr-line); } #ix-root .ixr-more h2.ixr-more-h{ margin: 0 0 16px !important; font: 600 12px/1 var(--ixs-ui) !important; letter-spacing: .24em !important; text-transform: uppercase !important; color: var(--ixr-main) !important; } #ix-root .ixr-more-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; text-align: left; } #ix-root .ixr-card{ display: block; min-width: 0; color: inherit; text-decoration: none; } #ix-root .ixr-card-img{ display: block; width: 100%; height: 120px; object-fit: cover; border-radius: 6px; background: color-mix(in srgb, var(--ix-t-main) 10%, var(--ix-t-paper)); } #ix-root .ixr-noimg{ height: 120px; border-radius: 6px; background: color-mix(in srgb, var(--ix-t-main) 10%, var(--ix-t-paper)); } #ix-root .ixr-card-m{ margin-top: 8px; font: 600 10.5px/1.2 var(--ixs-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ixr-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ix-root .ixr-card h3.ixr-card-h{ margin: 4px 0 0 !important; font: 500 15px/1.3 var(--ixs-display) !important; color: var(--ixr-main) !important; letter-spacing: normal !important; text-transform: none !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } #ix-root .ixr-card:hover .ixr-card-h{ text-decoration: underline; text-decoration-color: var(--ixr-acc); } #ix-root .ixr-seemore{ display: inline-block; padding: 12px 22px; border-radius: 999px; background: var(--ixr-main); color: #fff; text-decoration: none; font: 600 13px/1 var(--ixs-ui); letter-spacing: .12em; text-transform: uppercase; } #ix-root .ixr-seemore:hover{ background: color-mix(in srgb, var(--ix-t-main), #000 18%); } /* ── Phone and tablet (991px and narrower) · HC-P-CB-3 ── */ @media (max-width: 991px){ #ix-root .ixr{ --ixr-body-size: 17px; --ixr-body-lh: 1.7; --ixr-gap: 18px; } #ix-root .ixr-art{ padding: 48px 18px 30px; } /* v1.0.6 */ #ix-root .ixr-art h1.ixr-h{ font-size: 30px !important; } #ix-root .ixr-by-n{ font-size: 19px; } #ix-root .ixr-art h3.ixr-sub, #ix-root .ixr-art .ixr-sub{ font-size: 18px !important; } #ix-root .ixr-gallery{ gap: 32px; } #ix-root .ixr-writers--two{ flex-direction: column; align-items: center; } #ix-root .ixr-writers--two .ixr-writer + .ixr-writer{ position: relative; border-left: 0; margin-top: 12px; padding-top: 12px; } #ix-root .ixr-writers--two .ixr-writer + .ixr-writer::before{ content: ""; position: absolute; top: 0; left: 50%; width: 60px; height: 1px; margin-left: -30px; background: color-mix(in srgb, var(--ix-t-main) 30%, transparent); } #ix-root .ixr-writer{ width: 240px; padding: 0; } #ix-root .ixr-play{ width: 60px; height: 60px; margin: -30px 0 0 -30px; } #ix-root .ixr-play svg{ width: 26px; height: 26px; } #ix-root .ixr-ts--words{ min-height: 90px; } #ix-root .ixr-ts-name{ font-size: 32px; } #ix-root .ixr-ts--mascot{ gap: 15px; margin: 16px 16px 0; padding: 11px 24px; border-width: 5px; justify-content: center; } /* v1.0.9 */ #ix-root .ixr-ts-mascot{ width: 68px; height: 68px; padding: 5px; border-width: 3px; } #ix-root .ixr-ts-wordmark{ height: 61px; max-width: calc(100% - 83px); } #ix-root .ixr-ts-name--mascot{ font-size: 24px; } #ix-root .ixr-tile{ margin: 16px 10px 0; border-radius: 10px; } #ix-root .ixr-body h1{ font-size: 28px !important; margin: 32px 0 14px !important; } #ix-root .ixr-body h2{ font-size: 24px !important; margin: 32px 0 12px !important; } #ix-root .ixr-body h3{ font-size: 20px !important; margin: 24px 0 10px !important; } #ix-root .ixr-body figure.rte-inserted-image[data-img-size="small"]{ max-width: 60% !important; } #ix-root .ixr-body figure.rte-inserted-image[data-img-size="medium"]{ max-width: 80% !important; } #ix-root .ixr-more-grid{ grid-template-columns: 1fr; gap: 16px; } #ix-root .ixr-card{ display: grid; grid-template-columns: 110px 1fr; grid-template-rows: auto 1fr; column-gap: 12px; } #ix-root .ixr-card-img, #ix-root .ixr-card .ixr-noimg{ grid-row: 1 / span 2; height: 80px; } #ix-root .ixr-card-m{ margin-top: 2px; } } /* Polaroid on phones (the old file's 767px step) */ @media (max-width: 767px){ #ix-root .ixr-gallery--polaroid .ixr-gcard{ padding: 10px 10px 0; } #ix-root .ixr-gallery--polaroid .ixr-gcap{ font-size: 13px; padding: 10px 4px 13px; } #ix-root .ixr-gallery--polaroid .ixr-gitem .ixr-gcard{ width: 88%; } #ix-root .ixr-gallery--polaroid .ixr-gitem:nth-child(3n+1) .ixr-gcard{ width: 100%; } #ix-root .ixr-gallery--polaroid .ixr-gitem:nth-child(5n+1) .ixr-gcard{ transform: rotate(-1.2deg); } #ix-root .ixr-gallery--polaroid .ixr-gitem:nth-child(5n+3) .ixr-gcard{ transform: rotate(1.3deg); } } @media (max-width: 479px){ #ix-root .ixr-gallery--polaroid .ixr-gitem:nth-child(n) .ixr-gcard{ width: 100%; transform: none; } /* straight, full width: tilt reads as a mistake this narrow */ #ix-root .ixr-lb{ padding: 16px 10px; } #ix-root .ixr-lb-img{ max-height: calc(100vh - 200px); max-height: calc(100dvh - 200px); } #ix-root .ixr-lb-cap{ font-size: 15px; } #ix-root .ixr-lb-pill{ width: 46px; height: 34px; } #ix-root .ixr{ --ixr-body-size: 16px; --ixr-body-lh: 1.65; --ixr-gap: 16px; } #ix-root .ixr-art h1.ixr-h{ font-size: 27px !important; } } /* v1.0.10 · the Accent mark above the headline of an article with no band */ #ix-root .ixr-amark{ display: block; width: 52px; height: 2px; margin: 0 auto 22px; background: var(--ixr-acc); }