/* talha2k.com — VS Code theme pages (Neo Brutal, Zen Garden) and their index.
   Every colour in the editor previews is taken from the published theme files. */

@font-face { font-family: "Archivo Black"; src: url("fonts/archivo-black-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin-wght-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree-latin-wght-normal.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-latin-wght-italic.woff2") format("woff2"); font-weight: 100 800; font-style: italic; font-display: swap; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
code, kbd, pre { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-variant-ligatures: none; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------- editor preview (shared structure, themed by --e-* variables) ---------- */
.ed { border: var(--e-frame, 1px solid #000); background: var(--e-bg); color: var(--e-fg); font: 12px/1.4 "Space Grotesk", "Figtree", system-ui, sans-serif; overflow: hidden; text-align: left; }
.ed-title { display: flex; align-items: center; gap: 7px; padding: 8px 12px; background: var(--e-title-bg); color: var(--e-title-fg); border-bottom: 1px solid var(--e-border); }
.ed-title i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: 0.35; }
.ed-title span { margin: 0 auto; padding-right: 44px; font-size: 11.5px; }
.ed-body { display: grid; grid-template-columns: 44px 190px minmax(0, 1fr); }
.ed-act { background: var(--e-act-bg); border-right: 1px solid var(--e-border); padding: 12px 0; display: grid; gap: 16px; align-content: start; justify-items: center; }
.ed-act b { width: 20px; height: 20px; border: 2px solid var(--e-act-fg); border-radius: 4px; opacity: 0.4; position: relative; }
.ed-act b:nth-child(2) { border-radius: 50%; }
.ed-act b.on { opacity: 1; }
.ed-act b em { position: absolute; right: -9px; bottom: -8px; min-width: 15px; padding: 0 3px; border-radius: 8px; background: var(--e-badge-bg); color: var(--e-badge-fg); font-weight: 700; font-size: 9px; line-height: 15px; font-style: normal; text-align: center; }
.ed-side { background: var(--e-side-bg); color: var(--e-side-fg); border-right: 1px solid var(--e-border); padding-bottom: 12px; }
.ed-side .ed-h { padding: 10px 14px 8px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--e-side-title); }
.ed-side .ed-sec { padding: 4px 14px; font-weight: 700; font-size: 11px; text-transform: uppercase; background: var(--e-sec-bg); color: var(--e-sec-fg); }
.ed-side li { display: flex; justify-content: space-between; padding: 3.5px 14px 3.5px 26px; }
.ed-side li.dir { padding-left: 14px; }
.ed-side li.sel { background: var(--e-sel-bg); color: var(--e-sel-fg); }
.ed-side li.mod, .ed-side li.mod em { color: var(--e-mod); }
.ed-side li.new, .ed-side li.new em { color: var(--e-new); }
.ed-side em { font-style: normal; font-weight: 700; }
.ed-tabs { display: flex; background: var(--e-tabs-bg); border-bottom: 1px solid var(--e-border); }
.ed-tabs span { padding: 8px 16px; background: var(--e-tab-bg); color: var(--e-tab-fg); border-right: 1px solid var(--e-border); border-top: 2px solid transparent; }
.ed-tabs span.on { background: var(--e-bg); color: var(--e-tab-on-fg); border-top-color: var(--e-tab-top); }
.ed-code { margin: 0; padding: 12px 0; overflow-x: auto; counter-reset: ln; font-size: 12.5px; line-height: 1.62; tab-size: 2; }
.ed-code .l { display: block; padding-right: 18px; white-space: pre; }
.ed-code .l::before { counter-increment: ln; content: counter(ln); display: inline-block; width: 46px; padding-right: 16px; text-align: right; color: var(--e-ln); opacity: var(--e-ln-op, 0.55); }
.ed-code .l.cur { background: var(--e-line); }
.ed-code .l.cur::before { color: var(--e-ln-on); opacity: 1; }
.ed-panel { border-top: 1px solid var(--e-panel-border); background: var(--e-panel-bg); }
.ed-ptabs { display: flex; gap: 18px; padding: 7px 16px 0; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--e-ptab); }
.ed-ptabs span { padding-bottom: 5px; border-bottom: 2px solid transparent; opacity: 0.7; }
.ed-ptabs span.on { opacity: 1; color: var(--e-ptab-on); border-bottom-color: var(--e-ptab-on-border); }
.ed-term { margin: 0; padding: 10px 16px 12px; background: var(--e-term-bg); color: var(--e-term-fg); font-size: 12px; line-height: 1.6; overflow-x: auto; }
.ed-term .ok { color: var(--e-term-ok); }
.ed-term .info { color: var(--e-term-info); }
.ed-term .dim { opacity: 0.65; }
.ed-status { display: flex; gap: 16px; padding: 5px 12px; background: var(--e-status-bg); color: var(--e-status-fg); border-top: 1px solid var(--e-border); font-size: 11px; }
.ed-status .r { margin-left: auto; }
@media (max-width: 760px) {
	.ed-body { grid-template-columns: minmax(0, 1fr); }
	.ed-act, .ed-side { display: none; }
	.ed-code { font-size: 11.5px; }
	.ed-code .l::before { width: 34px; padding-right: 10px; }
	.ed-tabs span:nth-child(3) { display: none; }
}

/* ---------- shared page pieces ---------- */
.top { display: flex; align-items: center; gap: 20px; padding-top: 20px; padding-bottom: 20px; }
.top .home { margin-right: auto; display: flex; align-items: center; gap: 10px; text-decoration: none; }
.top .home img { width: 34px; height: 34px; }
.top nav { display: flex; gap: 20px; font-size: 14.5px; }
.hero { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; padding-top: 36px; padding-bottom: 72px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.note { font-size: 13px; margin-top: 10px; }
.block { padding-top: 76px; padding-bottom: 76px; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; margin-top: 34px; }
.swatch { display: block; width: 100%; text-align: left; padding: 0; background: none; }
.swatch i { display: block; height: 76px; background: var(--c); }
.swatch span { display: block; padding: 10px 12px 12px; }
.swatch b { display: block; font-weight: inherit; }
.swatch code { font-size: 12.5px; }
.swatch small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.35; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; margin-top: 34px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px; }
.steps code { display: block; margin-top: 12px; padding: 10px 12px; font-size: 12.5px; overflow-x: auto; white-space: nowrap; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px; font-size: 14px; }
.other { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.foot { display: flex; flex-wrap: wrap; gap: 8px 26px; padding-top: 30px; padding-bottom: 46px; font-size: 14.5px; }
.foot span { margin-right: auto; }
@media (max-width: 900px) {
	.hero { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-bottom: 54px; }
	.steps { grid-template-columns: 1fr; }
	.block { padding-top: 54px; padding-bottom: 54px; }
	.other { grid-template-columns: 1fr; }
	.top nav a:not(.keep) { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* =====================================================================
   NEO BRUTAL — cream paper, black rules, loud blocks
   ===================================================================== */
.neo {
	--pink: #ff006e; --blue: #00d9ff; --jade: #00a86b; --lime: #ccff00; --orange: #ff6b35; --purple: #9d00ff; --black: #000; --cream: #fffef2; --blush: #ffe5ec;
	background: var(--cream); color: var(--black);
	font: 500 17px/1.55 "Space Grotesk", system-ui, sans-serif;
}
.neo :focus-visible { outline: 3px dashed var(--black); outline-offset: 3px; }
.neo h1, .neo h2, .neo h3, .neo .btn, .neo .top .home { font-family: "Archivo Black", "Arial Black", sans-serif; font-weight: 400; text-transform: uppercase; line-height: 1; }
.neo .top { border-bottom: 3px solid var(--black); max-width: none; padding-left: max(24px, calc((100% - 1072px) / 2)); padding-right: max(24px, calc((100% - 1072px) / 2)); }
.neo .top nav a { font-weight: 700; text-transform: uppercase; text-decoration: none; font-size: 13.5px; }
.neo .top nav a:hover { background: var(--lime); box-shadow: 0 0 0 4px var(--lime); }
.neo .checker { height: 36px; border-bottom: 3px solid var(--black); background: repeating-conic-gradient(var(--black) 0 25%, var(--lime) 0 50%) 0 0 / 36px 36px; }
.neo h1 { font-size: clamp(50px, 7.2vw, 88px); letter-spacing: -0.02em; }
.neo h1 span { display: inline-block; padding: 0.06em 0.14em 0.02em; border: 3px solid var(--black); }
.neo h1 span:first-of-type { background: var(--blush); }
.neo h1 span:last-of-type { background: var(--blue); margin-top: -3px; transform: translateX(0.22em); }
.neo .lead { margin-top: 28px; font-size: 19px; font-weight: 600; max-width: 30em; }
.neo .btn { display: inline-block; padding: 16px 24px; font-size: 15px; text-decoration: none; border: 3px solid var(--black); box-shadow: 6px 6px 0 var(--black); background: var(--pink); transition: transform 0.1s, box-shadow 0.1s; }
.neo .btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--black); }
.neo .btn:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--black); }
.neo .btn.alt { background: var(--cream); }
.neo .btn.lime { background: var(--lime); }
.neo .note { font-weight: 600; }
.neo .ed { --e-frame: 3px solid #000; box-shadow: 10px 10px 0 var(--black); }
.neo h2 { font-size: clamp(30px, 4.6vw, 52px); max-width: 16em; }
.neo .band { border-top: 3px solid var(--black); border-bottom: 3px solid var(--black); }
.neo .band.blush { background: var(--blush); }
.neo .band.blue { background: var(--blue); }
.neo .sub { margin-top: 16px; font-weight: 600; max-width: 36em; }
.neo .swatch { border: 3px solid var(--black); background: #fff; box-shadow: 5px 5px 0 var(--black); transition: transform 0.1s, box-shadow 0.1s; }
.neo .swatch:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--black); }
.neo .swatch i { border-bottom: 3px solid var(--black); }
.neo .swatch b { font-family: "Archivo Black", sans-serif; text-transform: uppercase; font-size: 15px; }
.neo .card { border: 3px solid var(--black); background: #fff; box-shadow: 6px 6px 0 var(--black); padding: 24px; }
.neo .card:nth-child(4n + 1) { background: var(--lime); }
.neo .card:nth-child(4n + 3) { background: var(--orange); }
.neo .card h3 { font-size: 19px; line-height: 1.1; }
.neo .card p { margin-top: 10px; font-size: 15.5px; font-weight: 600; }
.neo .steps .card { background: #fff; }
.neo .steps code { background: var(--black); color: var(--lime); }
.neo .steps .n { font-family: "Archivo Black", sans-serif; font-size: 15px; }
.neo kbd { border: 2px solid var(--black); background: #fff; padding: 1px 6px; font-size: 13px; }
.neo .facts b { background: var(--black); color: var(--lime); padding: 2px 8px; font-weight: 700; margin-right: 6px; text-transform: uppercase; font-size: 12px; }
.neo .other { border: 3px solid var(--black); background: var(--purple); color: #fff; box-shadow: 10px 10px 0 var(--black); padding: 34px 36px; }
.neo .other p { margin-top: 12px; font-weight: 600; }
.neo .foot { border-top: 3px solid var(--black); max-width: none; padding-left: max(24px, calc((100% - 1072px) / 2)); padding-right: max(24px, calc((100% - 1072px) / 2)); font-weight: 600; }

.neo .ed, .hub .ed.neo-ed {
	--e-bg: #fffef2; --e-fg: #000; --e-border: #000;
	--e-title-bg: #ff006e; --e-title-fg: #000;
	--e-act-bg: #ff006e; --e-act-fg: #000; --e-badge-bg: #000; --e-badge-fg: #ccff00;
	--e-side-bg: #ffe5ec; --e-side-fg: #000; --e-side-title: #000; --e-sec-bg: #ff006e; --e-sec-fg: #000;
	--e-sel-bg: #ff006e; --e-sel-fg: #000; --e-mod: #00d9ff; --e-new: #ccff00;
	--e-tabs-bg: #ffe5ec; --e-tab-bg: #e8e8e8; --e-tab-fg: rgba(0, 0, 0, 0.5); --e-tab-on-fg: #000; --e-tab-top: #ff006e;
	--e-ln: #000; --e-ln-on: #ff006e; --e-line: rgba(255, 248, 231, 0.13);
	--e-panel-bg: #fffef2; --e-panel-border: #000; --e-ptab: #000; --e-ptab-on: #000; --e-ptab-on-border: #ff006e;
	--e-term-bg: #000; --e-term-fg: #ccff00; --e-term-ok: #ccff00; --e-term-info: #00d9ff;
	--e-status-bg: #00d9ff; --e-status-fg: #000;
}
.neo-syntax .t-c { color: #666; font-style: italic; }
.neo-syntax .t-k, .neo-syntax .t-sm { color: #ff006e; font-weight: 700; }
.neo-syntax .t-s, .neo-syntax .t-cl { color: #9d00ff; font-weight: 700; }
.neo-syntax .t-str { color: #00a86b; }
.neo-syntax .t-n { color: #00d9ff; font-weight: 700; }
.neo-syntax .t-f { color: #ff6b35; font-weight: 700; }
.neo-syntax .t-o { font-weight: 700; }
.neo-syntax .t-th { color: #ff006e; font-weight: 700; font-style: italic; }

/* =====================================================================
   ZEN GARDEN — raked sand at dusk
   ===================================================================== */
.zen {
	--oxford: #363e58; --armadillo: #423e37; --maize: #f6d6ad; --brandy: #dab786; --tacao: #e8a87c; --pink: #c38d9e; --acapulco: #85b79d; --bitter: #ff6f61; --nymph: #6ca59e; --cranberry: #da627d; --mauve: #c594ff; --fountain: #52b2bf;
	background: var(--oxford); color: var(--maize);
	font: 400 17px/1.65 "Figtree", system-ui, sans-serif;
}
.zen :focus-visible { outline: 2px solid var(--fountain); outline-offset: 4px; border-radius: 4px; }
.zen h1, .zen h2, .zen h3 { font-family: "Fraunces", Georgia, serif; font-weight: 300; line-height: 1.12; letter-spacing: -0.01em; }
.zen .sand { background: repeating-radial-gradient(circle at 82% 34%, transparent 0 25px, rgba(246, 214, 173, 0.055) 25px 26px); }
.zen .top .home { font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 21px; }
.zen .top .home img { border-radius: 50%; }
.zen .top nav a { text-decoration: none; color: var(--brandy); }
.zen .top nav a:hover { color: var(--maize); }
.zen h1 { font-size: clamp(52px, 8vw, 96px); font-style: italic; color: var(--cranberry); }
.zen .lead { margin-top: 22px; font-size: 20px; max-width: 28em; color: var(--maize); }
.zen .btn { display: inline-block; padding: 13px 24px; border-radius: 999px; text-decoration: none; background: var(--fountain); color: #10222a; font-weight: 600; transition: background 0.2s; }
.zen .btn:hover { background: #6cc4cf; }
.zen .btn.alt { background: none; color: var(--maize); box-shadow: inset 0 0 0 1px rgba(246, 214, 173, 0.45); }
.zen .btn.alt:hover { box-shadow: inset 0 0 0 1px var(--maize); }
.zen .note { color: var(--brandy); }
.zen .ed { --e-frame: 1px solid #423e37; border-radius: 12px; box-shadow: 0 30px 70px rgba(15, 18, 30, 0.45); font-family: "Figtree", system-ui, sans-serif; }
.zen h2 { font-size: clamp(30px, 4.2vw, 46px); max-width: 16em; }
.zen .sub { margin-top: 14px; max-width: 36em; color: var(--brandy); }
.zen .band { background: var(--armadillo); }
.zen .swatch { border-radius: 12px; overflow: hidden; background: rgba(246, 214, 173, 0.06); transition: background 0.2s; }
.zen .swatch:hover { background: rgba(246, 214, 173, 0.12); }
.zen .swatch b { font-family: "Fraunces", Georgia, serif; font-size: 18px; }
.zen .swatch code, .zen .swatch small { color: var(--brandy); }
.zen .card { padding: 4px 0 0 22px; border-left: 1px solid rgba(246, 214, 173, 0.3); }
.zen .card h3 { font-size: 23px; color: var(--tacao); }
.zen .card p { margin-top: 8px; font-size: 16px; }
.zen .steps .n { font-family: "Fraunces", Georgia, serif; font-style: italic; color: var(--mauve); font-size: 18px; }
.zen .steps code { background: rgba(0, 0, 0, 0.22); color: var(--maize); border-radius: 8px; }
.zen kbd { background: rgba(0, 0, 0, 0.22); border-radius: 5px; padding: 2px 7px; font-size: 13px; }
.zen .facts { color: var(--brandy); }
.zen .facts b { font-weight: 600; color: var(--maize); margin-right: 6px; }
.zen .other { border-radius: 16px; background: rgba(246, 214, 173, 0.07); padding: 34px 36px; }
.zen .other p { margin-top: 10px; color: var(--brandy); }
.zen .foot { color: var(--brandy); }

.zen .ed, .hub .ed.zen-ed {
	--e-bg: #363e58; --e-fg: #f6d6ad; --e-border: #423e37;
	--e-title-bg: #363e58; --e-title-fg: #f6d6ad;
	--e-act-bg: #423e37; --e-act-fg: #f6d6ad; --e-badge-bg: #ff6f61; --e-badge-fg: #fff;
	--e-side-bg: #423e37; --e-side-fg: #f6d6ad; --e-side-title: #ddc597; --e-sec-bg: transparent; --e-sec-fg: #f6d6ad;
	--e-sel-bg: #6ca59e; --e-sel-fg: #fff; --e-mod: #e8a87c; --e-new: #85b79d;
	--e-tabs-bg: #423e37; --e-tab-bg: #423e37; --e-tab-fg: rgba(246, 214, 173, 0.5); --e-tab-on-fg: #fff; --e-tab-top: transparent;
	--e-ln: #f6d6ad; --e-ln-on: #f6d6ad; --e-ln-op: 0.45; --e-line: rgba(255, 255, 255, 0.035);
	--e-panel-bg: #423e37; --e-panel-border: rgba(195, 141, 158, 0.35); --e-ptab: #e8a87c; --e-ptab-on: #e8a87c; --e-ptab-on-border: #e8a87c;
	--e-term-bg: #423e37; --e-term-fg: #f6d6ad; --e-term-ok: #6ca59e; --e-term-info: #52b2bf;
	--e-status-bg: #ff6f61; --e-status-fg: #f6d6ad;
}
.zen-syntax .t-c { color: #c38d9e; font-style: italic; }
.zen-syntax .t-k, .zen-syntax .t-s, .zen-syntax .t-sm { color: #c594ff; }
.zen-syntax .t-str { color: #f6d6ad; }
.zen-syntax .t-n { color: #dab786; }
.zen-syntax .t-f { color: #52b2bf; }
.zen-syntax .t-cl, .zen-syntax .t-cn, .zen-syntax .t-th { color: #e8a87c; }
.zen-syntax .t-v, .zen-syntax .t-p { color: #da627d; }
.zen-syntax .t-o { color: #6ca59e; }

/* =====================================================================
   INDEX — both themes side by side
   ===================================================================== */
.hub { background: #f0ede4; color: #121212; font: 500 17px/1.55 "Space Grotesk", system-ui, sans-serif; }
.hub :focus-visible { outline: 3px dashed #121212; outline-offset: 3px; }
.hub .top { border-bottom: 3px solid #121212; max-width: none; padding-left: max(24px, calc((100% - 1072px) / 2)); padding-right: max(24px, calc((100% - 1072px) / 2)); }
.hub .top .home { font-family: "Archivo Black", sans-serif; text-transform: uppercase; background: #ffd93d; border: 3px solid #121212; box-shadow: 4px 4px 0 #121212; padding: 6px 14px; font-size: 18px; }
.hub .top nav a { font-weight: 700; text-transform: uppercase; font-size: 13.5px; text-decoration: none; }
.hub h1 { font-family: "Archivo Black", sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(38px, 6.4vw, 76px); line-height: 0.98; letter-spacing: -0.01em; max-width: 12em; }
.hub .intro { padding-top: 60px; padding-bottom: 44px; }
.hub .intro p { margin-top: 20px; font-weight: 600; max-width: 34em; }
.hub .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-bottom: 80px; }
.hub .pick { display: flex; flex-direction: column; text-decoration: none; overflow: hidden; }
.hub .pick .ed { border: 0; }
.hub .pick .ed-body { grid-template-columns: minmax(0, 1fr); }
.hub .pick .ed-code { font-size: 11.5px; max-height: 250px; overflow: hidden; }
.hub .pick .txt { padding: 24px 26px 28px; flex: 1; }
.hub .pick.n { border: 3px solid #000; box-shadow: 8px 8px 0 #000; background: #fffef2; color: #000; transition: transform 0.1s, box-shadow 0.1s; }
.hub .pick.n:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 #000; }
.hub .pick.n .txt { border-top: 3px solid #000; }
.hub .pick.n h2 { font-family: "Archivo Black", sans-serif; font-weight: 400; text-transform: uppercase; font-size: 34px; line-height: 1; }
.hub .pick.n .go { display: inline-block; margin-top: 16px; font-family: "Archivo Black", sans-serif; text-transform: uppercase; font-size: 13.5px; background: #ff006e; border: 3px solid #000; padding: 8px 14px; }
.hub .pick.z { border-radius: 16px; background: #363e58; color: #f6d6ad; font-family: "Figtree", sans-serif; font-weight: 400; box-shadow: 0 22px 50px rgba(54, 62, 88, 0.35); transition: transform 0.2s; }
.hub .pick.z:hover { transform: translateY(-4px); }
.hub .pick.z h2 { font-family: "Fraunces", Georgia, serif; font-weight: 300; font-style: italic; font-size: 40px; line-height: 1; color: #da627d; }
.hub .pick.z .go { display: inline-block; margin-top: 16px; background: #52b2bf; color: #10222a; font-weight: 600; border-radius: 999px; padding: 9px 18px; font-size: 14.5px; }
.hub .pick p { margin-top: 12px; }
.hub .foot { border-top: 3px solid #121212; max-width: none; padding-left: max(24px, calc((100% - 1072px) / 2)); padding-right: max(24px, calc((100% - 1072px) / 2)); font-weight: 600; }
@media (max-width: 820px) { .hub .pair { grid-template-columns: 1fr; } }