*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Palatino Linotype',Palatino,'Book Antiqua',serif;line-height:1.9;color:#2a2a2a;background:#fefefe}
.css-40gt83p{max-width:640px;margin:0 auto;padding:0 20px}
.css-a19lfxg{padding:60px 0 40px;border-bottom:1px solid #ccc;margin-bottom:48px}
.css-a19lfxg h1{font-size:24px;font-weight:400;letter-spacing:-.5px}
.css-a19lfxg p{font-size:14px;color:#777;margin-top:6px;font-style:italic}
.css-a19lfxg a{color:#2a2a2a;text-decoration:none;font-size:24px;font-weight:400;letter-spacing:-.5px}
.css-sxe8anh{padding:20px 0}
.css-sxe8anh h2{font-size:18px;font-weight:400;margin-bottom:4px}
.css-sxe8anh h2 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.css-sxe8anh h2 a:hover{border-bottom-color:#2a2a2a}
.css-sxe8anh .css-6l2ibvg{font-size:12px;color:#aaa;margin-bottom:6px}
.css-sxe8anh p{font-size:14px;color:#666}
.css-i8dgkhx{color:#888;font-size:13px;text-decoration:none}
.css-i8dgkhx:hover{color:#2a2a2a}
.css-3puop52{padding-bottom:60px}
.css-3puop52 h1{font-size:28px;font-weight:400;margin-bottom:8px}
.css-3puop52 .css-6l2ibvg{font-size:12px;color:#aaa;display:block;margin-bottom:32px}
.css-3puop52 h2{font-size:21px;font-weight:400;margin:40px 0 12px;border-bottom:1px solid #eee;padding-bottom:6px}
.css-3puop52 h3{font-size:17px;margin:28px 0 8px}
.css-3puop52 p{margin-bottom:18px;font-size:16px}
.css-3puop52 ul,.css-3puop52 ol{margin:0 0 18px 20px}
.css-3puop52 a{color:#555;border-bottom:1px solid #ccc}
.css-3puop52 a:hover{color:#000;border-bottom-color:#000}
.css-3puop52 img{max-width:100%;height:auto;margin:24px 0}
.css-306l9mr{border-top:1px solid #ddd;padding:20px 0;margin-top:48px;text-align:center;font-size:12px;color:#aaa}
.css-306l9mr a{color:#aaa;text-decoration:none}
.css-d9o7c09{padding:0 0 16px;margin-bottom:24px;font-size:12px;color:#aaa;font-style:italic;border-bottom:1px solid #eee}
.css-yejblqj{padding:16px 0 0;margin-top:32px;font-size:11px;color:#999;border-top:1px solid #eee}
.css-jbz432y{font-size:12px;color:#aaa;margin:-26px 0 32px;font-weight:300}
.css-fnldyah{margin:0 auto 32px;max-width:720px}
.css-du436kl{width:100%;height:auto}
.css-lfwb8z1{margin-top:40px;padding-top:20px;border-top:1px solid #eee;font-size:14px;color:#888}
.css-lfwb8z1 em{color:#aaa}
.css-lfwb8z1 a{color:#555;border-bottom:1px solid #ddd;text-decoration:none}
.css-f4z5zrd{padding:24px 0 0;border-top:1px solid #eee;margin-top:24px}
.css-f4z5zrd p{padding:3px 0;margin:0;font-size:15px}
.css-f4z5zrd a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.css-f4z5zrd a:hover{border-bottom-color:#2a2a2a}

:root{--primary:#3D5C2A;--accent:#C9C0A0;--bg:#F0EBE0;--fg:#1A1F14;--border:#C0B8A0;--r:10px;--fb:'Karla';--fh:'Petrona'}

@font-face{font-family:'Petrona';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(https://fonts.gstatic.com/s/petrona/v38/mtG64_NXL7bZo9XXgXJYtQ.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Petrona';font-style:italic;font-weight:400 500;font-display:swap;
  src:url(https://fonts.gstatic.com/s/petrona/v38/mtG44_NXL7bZo9XXgXdot0MV.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Karla';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(https://fonts.gstatic.com/s/karla/v33/qkB9XvYC6trAT55ZBi1ueQVIjQTD-JrIH2G7nytkHRyQ8p4wUje6bg.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{ --meta:#7B7255; --rust:#B34F2A; --paper:#faf5ec; --masthead:#31491F; --hair:rgba(26,31,20,.09); }

:root body { font-family: var(--fb), system-ui, -apple-system, sans-serif; color: var(--fg); background: var(--bg); line-height: 1.72; font-size: 16.5px; }
::selection { background: var(--accent); color: var(--fg); }
:root hr { border: 0; border-top: 1px solid var(--border); margin: 30px 0; }

:root > body > header { max-width: none; width: 100%; background: linear-gradient(180deg, var(--masthead), var(--primary)); color: var(--bg); text-align: center; padding: 38px 24px 32px; margin-bottom: 58px; border-bottom: 3px solid var(--accent); }
:root > body > header::before { content: ""; display: block; width: 46px; height: 46px; margin: 0 auto 14px; opacity: .95;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%23C9C0A0'%20stroke-width='1.6'%20stroke-linecap='round'%3E%3Ccircle%20cx='24'%20cy='24'%20r='19'/%3E%3Ccircle%20cx='24'%20cy='24'%20r='2.2'%20fill='%23C9C0A0'%20stroke='none'/%3E%3Cline%20x1='24'%20y1='24'%20x2='34'%20y2='14'/%3E%3Cline%20x1='24'%20y1='5'%20x2='24'%20y2='9'/%3E%3Cline%20x1='24'%20y1='39'%20x2='24'%20y2='43'/%3E%3Cline%20x1='5'%20y1='24'%20x2='9'%20y2='24'/%3E%3Cline%20x1='39'%20y1='24'%20x2='43'%20y2='24'/%3E%3Cline%20x1='10.5'%20y1='10.5'%20x2='13.3'%20y2='13.3'/%3E%3Cline%20x1='37.5'%20y1='10.5'%20x2='34.7'%20y2='13.3'/%3E%3C/svg%3E") no-repeat center/contain; }
:root > body > header h1, :root > body > header > a { display: block; margin: 0 auto; padding: 0; max-width: 740px; font-family: 'Petrona', Cambria, serif; font-style: italic; font-weight: 500; font-size: 40px; line-height: 1.08; letter-spacing: .01em; color: var(--bg); text-decoration: none; }
:root > body > header p { max-width: 560px; margin: 13px auto 0; padding: 0 24px; font-family: 'Petrona', Cambria, serif; font-style: italic; font-weight: 400; font-size: 15.5px; line-height: 1.55; color: rgba(240, 235, 224, .9); }
:root > body > header:has(> a)::after { content: "The Calibrated Kitchen"; display: block; margin-top: 11px; font-family: 'Petrona', Cambria, serif; font-style: italic; font-size: 14px; color: rgba(240, 235, 224, .82); }

:root main { max-width: 1120px; margin: 0 auto; padding: 0 32px 72px; }
:root main:has(> article) { max-width: 720px; padding: 0 24px 64px; }

:root main:has(> article) > h1 { font-family: 'Petrona', Cambria, serif; font-size: 36px; font-weight: 600; color: var(--primary); line-height: 1.14; margin: 4px 0 12px; }
:root:root main:has(> article) > span { display: block; font-family: 'Karla', system-ui, sans-serif; font-size: 12px; color: var(--meta); margin-bottom: 30px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
:root main:has(> article) > span::after { content: "By Hannah McAllister \00B7 Madison, WI \00B7 Long-term test"; display: block; margin-top: 7px; color: var(--rust); font-weight: 600; letter-spacing: .12em; }

:root main > article > p { margin-bottom: 18px; font-size: 18px; line-height: 1.78; max-width: 66ch; }
:root main > article > h2 { font-family: 'Petrona', Cambria, serif; font-size: 25px; font-weight: 600; color: var(--primary); margin: 44px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--accent); }
:root main > article > h2::before { content: ""; display: block; width: 84px; height: 10px; margin-bottom: 16px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2084%2010'%20fill='none'%20stroke='%23C9C0A0'%20stroke-width='1.3'%3E%3Cline%20x1='1'%20y1='9'%20x2='83'%20y2='9'/%3E%3Cline%20x1='6'%20y1='9'%20x2='6'%20y2='1'/%3E%3Cline%20x1='18'%20y1='9'%20x2='18'%20y2='3'/%3E%3Cline%20x1='30'%20y1='9'%20x2='30'%20y2='3'/%3E%3Cline%20x1='42'%20y1='9'%20x2='42'%20y2='1'/%3E%3Cline%20x1='54'%20y1='9'%20x2='54'%20y2='3'/%3E%3Cline%20x1='66'%20y1='9'%20x2='66'%20y2='3'/%3E%3Cline%20x1='78'%20y1='9'%20x2='78'%20y2='1'/%3E%3C/svg%3E") no-repeat left bottom; }
:root main > article > h3 { font-family: 'Petrona', Cambria, serif; font-size: 19px; font-weight: 600; font-style: normal; color: var(--primary); margin: 30px 0 10px; }
:root main > article ul, :root main > article ol { margin: 0 0 18px 24px; }
:root main > article li { margin-bottom: 8px; font-size: 16.5px; line-height: 1.7; }
:root main > article li strong { color: var(--primary); font-weight: 700; }
:root main > article blockquote { position: relative; border-left: 3px solid var(--accent); padding: 8px 0 8px 26px; margin: 26px 0; font-family: 'Petrona', Cambria, serif; font-style: italic; font-size: 20px; line-height: 1.55; color: var(--primary); }
:root main > article blockquote::before { content: "\00201C"; position: absolute; left: -2px; top: 12px; font-family: 'Petrona', serif; font-size: 46px; line-height: 0; color: var(--accent); }
:root main > article > p strong { color: var(--primary); font-weight: 700; }

:root main > article > p a, :root main > article > p a:visited { color: var(--primary); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: 600; }
:root main > article > p a:hover { color: var(--rust); text-decoration-color: var(--rust); }

:root main > article > p a[href^="/pick/"], :root main > article > p a[href^="/ref/"], :root main > article > p a[href^="/try/"], :root main > article > p a[href^="/check/"], :root main > article > p a[href^="/go/"], :root main > article > p a[href^="/out/"] { background: var(--accent); color: var(--fg); padding: 2px 11px; border-radius: 5px; text-decoration: none; font-weight: 600; font-family: 'Karla', system-ui, sans-serif; font-size: 15px; letter-spacing: .01em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
:root main > article > p a[href^="/pick/"]:hover, :root main > article > p a[href^="/ref/"]:hover, :root main > article > p a[href^="/try/"]:hover, :root main > article > p a[href^="/check/"]:hover, :root main > article > p a[href^="/go/"]:hover, :root main > article > p a[href^="/out/"]:hover { background: var(--primary); color: var(--bg); }

:root main > article > img, :root main > article > figure { margin: 0 0 28px; }
:root main > article > img, :root main > article > figure > img { width: 100%; height: auto; display: block; border-radius: var(--r); box-shadow: 0 3px 14px rgba(26, 31, 20, .12); }

:root main > article table { width: 100%; border-collapse: collapse; margin: 24px 0; font-family: 'Karla', system-ui, sans-serif; font-size: 14.5px; background: var(--paper); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
:root main > article table th { background: var(--primary); color: var(--bg); padding: 9px 13px; text-align: left; font-family: 'Petrona', Cambria, serif; font-weight: 500; font-size: 13.5px; letter-spacing: .02em; }
:root main > article table td { padding: 9px 13px; border-bottom: 1px solid var(--border); vertical-align: top; font-variant-numeric: tabular-nums; }

:root main:not(:has(> article)) { display: grid; grid-template-columns: repeat(6, 1fr); gap: 34px 30px; counter-reset: pick; }

:root main:not(:has(> article)) > div:nth-of-type(1) { grid-column: 1 / -1; order: 1; display: grid; grid-template-columns: 1fr 236px; gap: 0 42px; background: var(--paper); border: 1px solid var(--hair); border-radius: 10px; box-shadow: 0 2px 10px rgba(26, 31, 20, .06); padding: 42px 46px 46px; }
:root main:not(:has(> article)) > div:nth-of-type(1) > * { grid-column: 1; margin: 0; }
:root main:not(:has(> article)) > div:nth-of-type(1) > p:nth-of-type(1) { font-family: 'Karla', system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--meta); margin-bottom: 16px; }
:root main:not(:has(> article)) > div:nth-of-type(1) > h2 { font-family: 'Petrona', Cambria, serif; font-size: 46px; font-weight: 600; line-height: 1.08; margin-bottom: 20px; padding: 0; border: 0; }
:root main:not(:has(> article)) > div:nth-of-type(1) > h2 a { color: var(--primary); text-decoration: none; }
:root main:not(:has(> article)) > div:nth-of-type(1) > h2 a:hover { color: var(--rust); }
:root main:not(:has(> article)) > div:nth-of-type(1) > p:nth-of-type(2) { font-family: 'Petrona', Cambria, serif; font-size: 20px; line-height: 1.55; color: #33301f; max-width: 62ch; margin-bottom: 22px; }
:root main:not(:has(> article)) > div:nth-of-type(1) > p:nth-of-type(2)::first-letter { float: left; font-family: 'Petrona', serif; font-weight: 700; font-size: 62px; line-height: .78; color: var(--rust); margin: 6px 12px 0 0; }
:root main:not(:has(> article)) > div:nth-of-type(1) > a:last-child { justify-self: start; font-family: 'Karla', system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); text-decoration: none; padding: 10px 22px; border: 1.5px solid var(--primary); border-radius: 6px; }
:root main:not(:has(> article)) > div:nth-of-type(1) > a:last-child:hover { background: var(--primary); color: var(--bg); }
:root main:not(:has(> article)) > div:nth-of-type(1)::after { content: "N\0000BA\0000A0I\A LATEST REVIEW\A BY HANNAH\0000A0McALLISTER\A THE CALIBRATED KITCHEN"; white-space: pre-line; grid-column: 2; grid-row: 1 / 5; align-self: start; padding-left: 26px; border-left: 1px solid var(--accent); font-family: 'Karla', system-ui, sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; line-height: 2.4; color: var(--meta); }

:root main:not(:has(> article))::before { content: "Editor's Picks\0000A0\002014\0000A0Read These First"; order: 2; grid-column: 1 / -1; margin: 40px 0 2px; padding-bottom: 11px; border-bottom: 1px solid rgba(179, 79, 42, .35); font-family: 'Karla', system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--rust); }

:root main:not(:has(> article)) > div:nth-of-type(n+2):nth-of-type(-n+4) { grid-column: span 2; order: 3; position: relative; background: var(--paper); border: 1px solid var(--hair); border-radius: 8px; box-shadow: 0 1px 4px rgba(26, 31, 20, .04); padding: 30px 30px 28px; counter-increment: pick; }
:root main:not(:has(> article)) > div:nth-of-type(n+2):nth-of-type(-n+4)::before { content: counter(pick, upper-roman); position: absolute; top: 22px; right: 26px; font-family: 'Petrona', serif; font-style: italic; font-weight: 500; font-size: 20px; color: var(--accent); }
:root main:not(:has(> article)) > div:nth-of-type(n+2):nth-of-type(-n+4) > p:nth-of-type(1) { font-family: 'Karla', system-ui, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--meta); margin: 0 40px 12px 0; }
:root main:not(:has(> article)) > div:nth-of-type(n+2):nth-of-type(-n+4) > h2 { font-family: 'Petrona', Cambria, serif; font-size: 21px; font-weight: 600; line-height: 1.22; margin: 0 0 12px; padding: 0; border: 0; }
:root main:not(:has(> article)) > div:nth-of-type(n+2):nth-of-type(-n+4) > h2 a { color: var(--primary); text-decoration: none; }
:root main:not(:has(> article)) > div:nth-of-type(n+2):nth-of-type(-n+4) > h2 a:hover { color: var(--rust); }
:root main:not(:has(> article)) > div:nth-of-type(n+2):nth-of-type(-n+4) > p:nth-of-type(2) { font-family: 'Karla', system-ui, sans-serif; font-size: 15px; line-height: 1.62; color: #4a4736; margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
:root main:not(:has(> article)) > div:nth-of-type(n+2):nth-of-type(-n+4) > a:last-child { font-family: 'Karla', system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
:root main:not(:has(> article)) > div:nth-of-type(n+2):nth-of-type(-n+4) > a:last-child:hover { border-bottom-color: var(--primary); }

:root main:not(:has(> article))::after { content: "IN ORDER OF WRITING"; order: 4; grid-column: 1 / -1; min-height: 210px; margin: 56px 0 40px; padding: 28px 20px; display: grid; place-items: center; text-align: center; border-radius: 8px;
  background:
    linear-gradient(rgba(21, 27, 15, .64), rgba(21, 27, 15, .46)),
    url("/img/all-clad-d3-vs-d5-cookware-comparison-guide/hero.webp") center / cover no-repeat,
    linear-gradient(135deg, #31491F, #3D5C2A);
  color: #F1ECDC; font-family: 'Karla', system-ui, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); box-shadow: inset 0 0 0 1px rgba(201, 192, 160, .18); }

:root main:not(:has(> article)) > div:nth-of-type(n+5):has(> h2) { grid-column: span 3; order: 5; background: var(--paper); border: 1px solid var(--hair); border-radius: 8px; box-shadow: 0 1px 3px rgba(26, 31, 20, .04); padding: 26px 32px; }
:root main:not(:has(> article)) > div:nth-of-type(n+5):has(> h2) > p:nth-of-type(1) { font-family: 'Karla', system-ui, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--meta); margin: 0 0 10px; }
:root main:not(:has(> article)) > div:nth-of-type(n+5):has(> h2) > h2 { font-family: 'Petrona', Cambria, serif; font-size: 20px; font-weight: 600; line-height: 1.24; margin: 0 0 10px; padding: 0; border: 0; }
:root main:not(:has(> article)) > div:nth-of-type(n+5):has(> h2) > h2 a { color: var(--primary); text-decoration: none; }
:root main:not(:has(> article)) > div:nth-of-type(n+5):has(> h2) > h2 a:hover { color: var(--rust); }
:root main:not(:has(> article)) > div:nth-of-type(n+5):has(> h2) > p:nth-of-type(2) { font-family: 'Karla', system-ui, sans-serif; font-size: 15px; line-height: 1.62; color: #4a4736; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
:root main:not(:has(> article)) > div:nth-of-type(n+5):has(> h2) > a:last-child { font-family: 'Karla', system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
:root main:not(:has(> article)) > div:nth-of-type(n+5):has(> h2) > a:last-child:hover { border-bottom-color: var(--primary); }

:root main:not(:has(> article)) > div:last-child { grid-column: 1 / -1; order: 6; margin-top: 8px; padding: 0; border: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; align-items: stretch; }
:root main:not(:has(> article)) > div:last-child::before { content: "PREVIOUS WRITING"; grid-column: 1 / -1; min-height: 210px; margin: 28px 0 22px; padding: 28px 20px; display: grid; place-items: center; text-align: center; border-radius: 8px;
  background:
    linear-gradient(rgba(21, 27, 15, .64), rgba(21, 27, 15, .46)),
    url("/img/best-sourdough-baking-tools-home-cooks/hero.webp") center / cover no-repeat,
    linear-gradient(135deg, #3D5C2A, #31491F);
  color: #F1ECDC; font-family: 'Karla', system-ui, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); box-shadow: inset 0 0 0 1px rgba(201, 192, 160, .18); }
:root main:not(:has(> article)) > div:last-child p { margin: 0; padding: 18px 20px; background: var(--paper); border: 1px solid var(--hair); border-radius: 8px; box-shadow: 0 1px 4px rgba(26, 31, 20, .04); font-family: 'Petrona', Cambria, serif; font-size: 16px; line-height: 1.4; transition: box-shadow .18s ease, transform .18s ease; }
:root main:not(:has(> article)) > div:last-child p:hover { box-shadow: 0 4px 12px rgba(26, 31, 20, .1); transform: translateY(-2px); }
:root main:not(:has(> article)) > div:last-child a { color: var(--primary); text-decoration: none; border-bottom: 0; }
:root main:not(:has(> article)) > div:last-child a:hover { color: var(--rust); }

:root footer { background: transparent; border-top: 1px solid var(--border); padding: 24px 0 34px; margin-top: 56px; text-align: center; font-family: 'Karla', system-ui, sans-serif; font-size: 12px; color: var(--fg); opacity: .6; letter-spacing: .04em; }
:root footer a { color: var(--fg); text-decoration: none; border-bottom: 1px dotted var(--border); }
:root footer a:hover { color: var(--primary); border-bottom-color: var(--primary); }

@media (max-width: 860px) {
  :root main:not(:has(> article)) { grid-template-columns: 1fr 1fr; gap: 24px; }
  :root main:not(:has(> article)) > div:nth-of-type(1) { grid-template-columns: 1fr; gap: 0; padding: 32px 30px 34px; }
  :root main:not(:has(> article)) > div:nth-of-type(1) > h2 { font-size: 34px; }
  :root main:not(:has(> article)) > div:nth-of-type(1)::after { grid-column: 1; grid-row: auto; margin-top: 22px; padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--accent); line-height: 2.2; }
  :root main:not(:has(> article)) > div:nth-of-type(n+2):nth-of-type(-n+4) { grid-column: 1 / -1; }
  :root main:not(:has(> article)) > div:nth-of-type(n+5):has(> h2) { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  :root main:not(:has(> article)) { grid-template-columns: 1fr; }
  :root main:not(:has(> article)) > div:last-child { grid-template-columns: repeat(2, 1fr); }
  :root main { padding: 0 20px 56px; }
  :root main:has(> article) > h1 { font-size: 30px; }
}

:root main > nav p,
:root main > section p {
  line-height: 1.85;
  margin: 0;
}
:root main > nav a,
:root main > section a {
  display: inline-block;
  margin: 0 4px;
  padding: 0 2px;
}

:root html, :root body { overflow-x: hidden; max-width: 100%; }
@media (max-width: 920px) {
  :root main > * { max-width: 100%; }
  :root main { overflow-x: hidden; }
}

@media (max-width: 640px) {
  :root main,
  :root main > article,
  :root main > div,
  :root main > section,
  :root main > nav {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
  }
  :root main > article > *,
  :root main > div > *,
  :root main > section > *,
  :root main > nav > * {
    max-width: 100%;
  }
  :root main h1,
  :root main h2,
  :root main h3,
  :root main h4 {
    overflow-wrap: break-word;
    word-break: normal;
  }
  
  :root main :is(ul, ol, section, div, nav)[style*="grid-template-columns"],
  :root main > section > ul,
  :root main > nav > ul,
  :root main > div > ul {
    grid-template-columns: 1fr !important;
  }
  
  :root main :is(ul, ol, section, div, p) {
    columns: 1;
  }
  
  :root main img,
  :root main figure {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 640px) {
  :root main {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 640px) {
  :root main:not(:has(> article)) > div:last-child { grid-template-columns: repeat(2, 1fr); }
}

:root main:not(:has(> h1)) > div:nth-of-type(1) {
  grid-column: 1 / -1;
  position: relative;      
  overflow: visible;       
  padding: 320px 44px 40px !important;
  border-radius: 8px;
  background:
    url("/gfx/premium-hero-card-1.webp") no-repeat center top / 100% 300px,
    var(--bg) !important;
  margin-top: 60px !important;  
}

:root main:not(:has(> h1)) > div:nth-of-type(2) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/gfx/premium-hero-card-2.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}
:root main:not(:has(> h1)) > div:nth-of-type(3) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/gfx/premium-hero-card-3.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}
:root main:not(:has(> h1)) > div:nth-of-type(4) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/gfx/premium-hero-card-4.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}

:root main:not(:has(> h1)) > div:nth-of-type(5) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/gfx/premium-hero-strip-1.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}
:root main:not(:has(> h1)) > div:nth-of-type(6) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/gfx/premium-hero-strip-2.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}

:root main:has(> h1) > article > p:first-of-type::first-letter {
  font-family: var(--fh), Georgia, serif;
  font-size: 76px; line-height: 0.9; color: var(--primary);
  float: left; margin: 6px 12px 0 0; padding: 0; font-weight: 400;
}
:root main:has(> h1) > article > h2 + p ~ h2::before {
  content: "✦ ✦ ✦";
  display: block; text-align: center; color: var(--accent);
  font-size: 12px; letter-spacing: 0.3em; margin-bottom: 24px;
  font-weight: 400;
}

@media (max-width: 720px) {
  :root main:not(:has(> h1)) > div:nth-of-type(1) {
    padding: 240px 22px 28px !important;
    background:
      url("/gfx/premium-hero-card-1.webp") no-repeat center top / 100% 220px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:nth-of-type(2) {
    padding: 180px 22px 26px !important;
    background:
      url("/gfx/premium-hero-card-2.webp") no-repeat center top / 100% 160px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:nth-of-type(3) {
    padding: 180px 22px 26px !important;
    background:
      url("/gfx/premium-hero-card-3.webp") no-repeat center top / 100% 160px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:nth-of-type(4) {
    padding: 180px 22px 26px !important;
    background:
      url("/gfx/premium-hero-card-4.webp") no-repeat center top / 100% 160px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1))::before,
  :root main:not(:has(> h1))::after { min-height: 240px; }
  :root main:has(> h1) > article > p:first-of-type::first-letter { font-size: 60px; }
}