@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('/wp-content/uploads/marginalia/fonts/archivo-100-900-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('/wp-content/uploads/marginalia/fonts/archivo-100-900-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Courier Prime'; font-style: italic; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/marginalia/fonts/courier-prime-400-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Courier Prime'; font-style: italic; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/marginalia/fonts/courier-prime-400-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/marginalia/fonts/courier-prime-400-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/marginalia/fonts/courier-prime-400-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 700; font-display: swap; src: url('/wp-content/uploads/marginalia/fonts/courier-prime-700-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 700; font-display: swap; src: url('/wp-content/uploads/marginalia/fonts/courier-prime-700-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Nanum Pen Script'; font-style: normal; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/marginalia/fonts/nanum-pen-script-400-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }    :root {  --mg-paper: #F2EDE3;  --mg-paper-card: #FBF8F1;  --mg-paper-note: #FFFDF8;  --mg-paper-shade: #E9E3D6;  --mg-photo: #2E2C29;   --mg-ink: #171614;  --mg-ink-soft: #2B2925;  --mg-graphite: #4A4740;  --mg-pencil: #8A857A;  --mg-ink-dim: #CFC9BC;   --mg-pen: #2B45D8;  --mg-highlighter: #F2D65A;  --mg-margin-red: #E07F6C;  --mg-red-pencil: #B23A25;   --mg-blush: #F0D2BF;  --mg-kraft: #E7D3B0;   --mg-tape: rgba(222, 207, 168, .82); --mg-tape-strong: rgba(222, 207, 168, .92); --mg-rule-blue: rgba(43, 69, 216, .22);  --mg-rule-blue-strong: rgba(43, 69, 216, .28);  --mg-rule-hair: rgba(23, 22, 20, .15);  --mg-rule-on-dark: rgba(242, 237, 227, .22); --mg-leader: rgba(23, 22, 20, .45);  --mg-choice-border: rgba(23, 22, 20, .3);   --mg-bg: var(--mg-paper); --mg-surface: var(--mg-paper-card); --mg-text: var(--mg-ink);  --mg-text-muted: var(--mg-graphite); --mg-text-faint: var(--mg-pencil); --mg-text-on-dark: var(--mg-paper); --mg-text-on-dark-muted: var(--mg-ink-dim); --mg-border: var(--mg-ink); --mg-accent: var(--mg-pen); --mg-accent-warm: var(--mg-highlighter); --mg-focus: var(--mg-pen); --mg-error: var(--mg-red-pencil); --mg-link: var(--mg-ink); --mg-link-hover: var(--mg-pen); --mg-btn-bg: var(--mg-ink); --mg-btn-bg-hover: var(--mg-pen); --mg-btn-ghost-hover: var(--mg-highlighter); }   :root { --mg-font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --mg-font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;  --mg-font-mono: 'Courier Prime', 'Courier New', Courier, monospace; --mg-font-hand: 'Nanum Pen Script', 'Segoe Print', cursive;  --mg-stretch-condensed: 80%;  --mg-stretch-step: 85%;  --mg-stretch-wide: 118%;   --mg-weight-regular: 400; --mg-weight-medium: 500; --mg-weight-semibold: 600; --mg-weight-bold: 700; --mg-weight-black: 800;  --mg-text-mega: clamp(68px, 44.23px + 6.095vw, 132px);  --mg-text-display: clamp(50px, 34.40px + 4.000vw, 92px);  --mg-text-h1: clamp(50px, 38.86px + 2.857vw, 80px);  --mg-text-h2: clamp(44px, 32.11px + 3.048vw, 76px);  --mg-text-offer: clamp(52px, 40.11px + 3.048vw, 84px);  --mg-text-price: clamp(34px, 28.80px + 1.333vw, 48px);  --mg-text-h3: clamp(26px, 24.51px + 0.381vw, 30px);  --mg-text-folder: clamp(32px, 29.77px + 0.571vw, 38px);  --mg-text-form-q: clamp(28px, 26.51px + 0.381vw, 32px);   --mg-text-card-title: clamp(22px, 20.89px + 0.286vw, 25px); --mg-text-h4: clamp(21px, 19.89px + 0.286vw, 24px);  --mg-text-quote: clamp(19px, 17.14px + 0.476vw, 24px);  --mg-text-lead: clamp(18px, 16.51px + 0.381vw, 22px);  --mg-text-body-lg: clamp(16px, 14.89px + 0.286vw, 19px);  --mg-text-body: clamp(16px, 15.63px + 0.095vw, 17px);  --mg-text-small: 15px;  --mg-text-nav: 16px;  --mg-text-step-num: clamp(52px, 40.11px + 3.048vw, 84px);  --mg-text-mono-lg: clamp(13px, 12.26px + 0.190vw, 15px);  --mg-text-mono: clamp(12px, 11.63px + 0.095vw, 13px);  --mg-text-mono-input: clamp(18px, 17.26px + 0.190vw, 20px);  --mg-text-hand-sm: 26px; --mg-text-hand: clamp(27px, 25.14px + 0.476vw, 32px);  --mg-text-hand-lg: clamp(30px, 27.03px + 0.762vw, 38px);  --mg-text-signature: clamp(36px, 33.77px + 0.571vw, 42px);   --mg-lh-display: .92; --mg-lh-heading: 1.05; --mg-lh-title: 1.15; --mg-lh-snug: 1.3; --mg-lh-body: 1.55; --mg-lh-lead: 1.5; --mg-lh-hand: .95;  --mg-ls-display: -0.035em; --mg-ls-mega: -0.04em; --mg-ls-heading: -0.015em; --mg-ls-title: -0.01em; --mg-ls-wordmark: -0.045em; --mg-ls-mono: .06em;  --mg-ls-eyebrow: .08em;  --mg-ls-label: .1em;  --mg-ls-numeral: -0.06em; }   :root {  --mg-space-3xs: 4px; --mg-space-2xs: 8px; --mg-space-xs: 12px; --mg-space-s: 16px; --mg-space-m: 24px; --mg-space-l: 32px; --mg-space-xl: 40px; --mg-space-2xl: 56px; --mg-space-3xl: 72px; --mg-space-4xl: 96px; --mg-space-5xl: 128px;  --mg-gutter: clamp(20px, -2.29px + 5.714vw, 80px);  --mg-section-y: clamp(80px, 59.20px + 5.333vw, 136px);  --mg-section-y-lg: clamp(96px, 72.23px + 6.095vw, 160px);  --mg-heading-gap: clamp(40px, 28.11px + 3.048vw, 72px);  --mg-grid-gap: clamp(32px, 29.03px + 0.762vw, 40px);  --mg-grid-row-gap: clamp(48px, 39.09px + 2.286vw, 72px);   --mg-page-max: 1440px; --mg-content-max: 1280px; --mg-measure: 640px;  --mg-header-h: clamp(72px, 61.60px + 2.667vw, 100px); --mg-hit-min: 44px;  --mg-radius-xs: 3px;  --mg-radius-s: 6px;  --mg-radius-m: 10px;  --mg-radius-l: 14px;  --mg-radius-xl: 18px;  --mg-radius-pill: 999px;  --mg-radius-phone: 32px; --mg-radius-blob: 56% 44% 52% 48% / 44% 50% 50% 56%; --mg-radius-blob-alt: 48% 52% 44% 56% / 56% 44% 52% 48%;  --mg-border-w: 1.5px; --mg-rule: 1.5px solid var(--mg-ink); --mg-rule-dashed: 2px dashed var(--mg-ink); --mg-rule-dashed-thin: 1.5px dashed var(--mg-ink); --mg-rule-card-head: 1.5px solid var(--mg-margin-red); }   :root {  --mg-shadow-print: 0 22px 34px -20px rgba(23, 22, 20, .5);  --mg-shadow-frame: 0 30px 44px -28px rgba(23, 22, 20, .55);  --mg-shadow-card: 0 0 0 1px rgba(23, 22, 20, .1), 0 24px 34px -22px rgba(23, 22, 20, .55);  --mg-shadow-card-warm: 0 20px 30px -20px rgba(91, 46, 24, .6);  --mg-shadow-card-blue: 0 26px 40px -24px rgba(8, 12, 60, .7);  --mg-shadow-sticky: 0 12px 16px -12px rgba(91, 46, 24, .6);  --mg-shadow-sticky-sm: 0 8px 12px -8px rgba(23, 22, 20, .5);  --mg-shadow-device: 0 24px 36px -18px rgba(23, 22, 20, .55);  --mg-shadow-device-dark: 0 30px 40px -24px rgba(0, 0, 0, .7);  --mg-shadow-receipt: drop-shadow(0 18px 16px rgba(23, 22, 20, .22));   --mg-tilt-xs: 1deg; --mg-tilt-s: 1.6deg; --mg-tilt-m: 3deg; --mg-tilt-l: 6deg; --mg-tilt-note: -4deg;  --mg-tilt-stamp: -6deg;  --mg-ease-pen: cubic-bezier(.6, .05, .3, 1); --mg-ease-out: ease; --mg-dur-hover: .2s; --mg-dur-lift: .25s; --mg-dur-tick: 380ms; --mg-dur-ring: 560ms; --mg-dur-underline: 650ms; --mg-dur-circle: 950ms; --mg-lift: translateY(-6px) rotate(-.6deg);  --mg-grain: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27220%27%20height=%27220%27%3E%3Cfilter%20id=%27g%27%3E%3CfeTurbulence%20type=%27fractalNoise%27%20baseFrequency=%27.85%27%20numOctaves=%272%27%20stitchTiles=%27stitch%27/%3E%3CfeColorMatrix%20values=%270%200%200%200%20.09%200%200%200%200%20.08%200%200%200%200%20.07%200%200%200%201.3%20-.5%27/%3E%3C/filter%3E%3Crect%20width=%27220%27%20height=%27220%27%20filter=%27url%28%23g%29%27/%3E%3C/svg%3E"); --mg-grain-size: 220px 220px; --mg-grain-opacity: .3; --mg-tape-clip: polygon(3% 0,97% 0,100% 20%,96% 38%,100% 56%,96% 74%,100% 92%,97% 100%,3% 100%,0 84%,4% 66%,0 48%,4% 30%,0 12%); --mg-torn-clip: polygon(0 8px,2.5% 3px,4% 9px,6.5% 5px,8% 11px,11% 4px,13% 8px,15.5% 2px,18% 10px,20% 6px,23% 12px,25% 5px,27.5% 9px,30% 3px,33% 10px,35% 6px,38% 11px,40.5% 2px,43% 8px,45% 4px,48% 12px,50.5% 6px,53% 10px,55% 3px,58% 9px,60.5% 5px,63% 11px,65% 4px,68% 9px,70.5% 2px,73% 10px,75% 6px,78% 12px,80.5% 4px,83% 8px,85.5% 3px,88% 10px,90% 5px,93% 11px,95.5% 4px,98% 9px,100% 5px,100% calc(100% - 7px),97.5% calc(100% - 2px),95% calc(100% - 10px),92.5% calc(100% - 4px),90% calc(100% - 11px),87% calc(100% - 3px),84.5% calc(100% - 9px),82% calc(100% - 5px),79% calc(100% - 12px),76.5% calc(100% - 4px),74% calc(100% - 8px),71% calc(100% - 2px),68.5% calc(100% - 10px),66% calc(100% - 6px),63% calc(100% - 11px),60.5% calc(100% - 3px),58% calc(100% - 9px),55% calc(100% - 5px),52.5% calc(100% - 12px),50% calc(100% - 4px),47% calc(100% - 9px),44.5% calc(100% - 2px),42% calc(100% - 10px),39% calc(100% - 6px),36.5% calc(100% - 11px),34% calc(100% - 3px),31% calc(100% - 8px),28.5% calc(100% - 4px),26% calc(100% - 12px),23% calc(100% - 5px),20.5% calc(100% - 9px),18% calc(100% - 2px),15% calc(100% - 10px),12.5% calc(100% - 4px),10% calc(100% - 11px),7% calc(100% - 6px),4.5% calc(100% - 10px),2% calc(100% - 3px),0 calc(100% - 8px)); --mg-receipt-clip: polygon(0 0,100% 0,100% calc(100% - 10px),97.5% 100%,95% calc(100% - 10px),92.5% 100%,90% calc(100% - 10px),87.5% 100%,85% calc(100% - 10px),82.5% 100%,80% calc(100% - 10px),77.5% 100%,75% calc(100% - 10px),72.5% 100%,70% calc(100% - 10px),67.5% 100%,65% calc(100% - 10px),62.5% 100%,60% calc(100% - 10px),57.5% 100%,55% calc(100% - 10px),52.5% 100%,50% calc(100% - 10px),47.5% 100%,45% calc(100% - 10px),42.5% 100%,40% calc(100% - 10px),37.5% 100%,35% calc(100% - 10px),32.5% 100%,30% calc(100% - 10px),27.5% 100%,25% calc(100% - 10px),22.5% 100%,20% calc(100% - 10px),17.5% 100%,15% calc(100% - 10px),12.5% 100%,10% calc(100% - 10px),7.5% 100%,5% calc(100% - 10px),2.5% 100%,0% calc(100% - 10px)); --mg-ruled-38: repeating-linear-gradient(to bottom, transparent 0 29px, var(--mg-rule-blue) 29px 30px, transparent 30px 38px); --mg-ruled-32: repeating-linear-gradient(to bottom, transparent 0 24px, var(--mg-rule-blue) 24px 25px, transparent 25px 32px); --mg-notebook: linear-gradient(90deg, transparent 52px, rgba(224, 127, 108, .9) 52px, rgba(224, 127, 108, .9) 53.5px, transparent 53.5px), repeating-linear-gradient(to bottom, transparent 0, transparent 41px, var(--mg-rule-blue) 41px, var(--mg-rule-blue) 42px); --mg-highlight-bg: linear-gradient(176deg, transparent 0 52%, var(--mg-highlighter) 52% 90%, transparent 90%); --mg-barcode: repeating-linear-gradient(90deg, #171614 0 2px, transparent 2px 4px, #171614 4px 5px, transparent 5px 8px, #171614 8px 11px, transparent 11px 12px, #171614 12px 13px, transparent 13px 17px, #171614 17px 18px, transparent 18px 20px);  --mg-icon-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M5 22 C9 25 13 29 16 35 C21 23 28 12 37 4' fill='none' stroke='%232B45D8' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --mg-icon-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 3 C9 2.2 16 2.6 21.5 2.4 C21.9 9 21.4 15 21.8 21.6 C15 21.9 8 21.2 2.2 21.7 C2.6 15 2.1 9 2.5 3 Z' fill='none' stroke='%23171614' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); --mg-mark-ring-nav: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 50' preserveAspectRatio='none'%3E%3Cpath d='M18 40 C4 26 30 6 66 6 C100 6 118 18 112 32 C106 44 70 48 46 45 C26 43 12 36 20 24' fill='none' stroke='%232B45D8' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");  --mg-mark-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 460 100' preserveAspectRatio='none'%3E%3Cpath d='M30 62 C18 30 120 8 240 8 C360 8 452 26 448 54 C444 84 330 96 220 94 C110 92 14 82 16 56 C18 36 70 18 150 12' fill='none' stroke='%232B45D8' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E"); --mg-mark-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C70 4 150 13 220 7 S285 6 297 9' fill='none' stroke='%232B45D8' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); } @keyframes mg-draw { to { stroke-dashoffset: 0; } }   html { -webkit-text-size-adjust: 100%; overflow-x: clip; }  body { margin: 0; background: var(--mg-bg); color: var(--mg-text); font-family: var(--mg-font-sans); font-size: var(--mg-text-body); line-height: var(--mg-lh-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0; color: var(--mg-text); } h1, h2 { font-family: var(--mg-font-display); font-weight: var(--mg-weight-black); font-stretch: var(--mg-stretch-condensed); line-height: var(--mg-lh-display); letter-spacing: var(--mg-ls-display); } h1 { font-size: var(--mg-text-h1); line-height: .94; } h2 { font-size: var(--mg-text-h2); } h3 { font-size: var(--mg-text-h4); font-weight: var(--mg-weight-bold); line-height: var(--mg-lh-title); letter-spacing: var(--mg-ls-title); } p { margin: 0; text-wrap: pretty; } a { color: var(--mg-link); transition: color var(--mg-dur-hover); } a:hover { color: var(--mg-link-hover); } :focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 3px; } ::selection { background: var(--mg-highlighter); color: var(--mg-ink); } img { max-width: 100%; display: block; } figcaption { text-align: left; }     .mg-page { position: relative; background: var(--mg-bg); color: var(--mg-text); font-family: var(--mg-font-sans); overflow-x: clip; } .mg-grain { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: var(--mg-grain-opacity); background-image: var(--mg-grain); background-size: var(--mg-grain-size); } .mg-container { width: 100%; max-width: var(--mg-page-max); margin-inline: auto; padding-inline: var(--mg-gutter); box-sizing: border-box; } .mg-section { position: relative; padding-block: var(--mg-section-y); } .mg-section--band { padding-block: var(--mg-section-y-lg); } .mg-section--blush { background: var(--mg-blush); } .mg-section--yellow { background: var(--mg-highlighter); overflow: hidden; } .mg-section--ink { background: var(--mg-ink); color: var(--mg-text-on-dark); } .mg-torn { background: var(--mg-pen); color: var(--mg-text-on-dark); clip-path: var(--mg-torn-clip); } .mg-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--mg-grid-gap); row-gap: var(--mg-grid-row-gap); } .mg-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mg-space-3xl); } .mg-split { display: grid; grid-template-columns: 480px minmax(0, 1fr); gap: 80px; align-items: start; } @media (max-width: 991px) { .mg-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mg-split { grid-template-columns: minmax(0, 1fr); gap: var(--mg-space-m); } } @media (max-width: 767px) { .mg-grid-3, .mg-grid-2 { grid-template-columns: minmax(0, 1fr); gap: 48px; } }  .mg-mega { font: var(--mg-weight-black) var(--mg-text-mega)/.88 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: var(--mg-ls-mega); margin: 0; } .mg-display { font: var(--mg-weight-black) var(--mg-text-display)/var(--mg-lh-display) var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: var(--mg-ls-display); margin: 0; text-wrap: balance; } .mg-h1 { font: var(--mg-weight-black) var(--mg-text-h1)/.94 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: var(--mg-ls-display); margin: 0; } .mg-h2 { font: var(--mg-weight-black) var(--mg-text-h2)/var(--mg-lh-display) var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: var(--mg-ls-display); margin: 0; } .mg-h3 { font: var(--mg-weight-black) var(--mg-text-h3)/var(--mg-lh-heading) var(--mg-font-display); font-stretch: var(--mg-stretch-step); letter-spacing: var(--mg-ls-heading); margin: 0; } .mg-h4 { font: var(--mg-weight-bold) var(--mg-text-h4)/var(--mg-lh-title) var(--mg-font-sans); letter-spacing: var(--mg-ls-title); margin: 0; } .mg-lead { font: var(--mg-weight-regular) var(--mg-text-lead)/var(--mg-lh-lead) var(--mg-font-sans); color: var(--mg-text-muted); max-width: 600px; text-wrap: pretty; } .mg-prose { font: var(--mg-weight-regular) var(--mg-text-lead)/var(--mg-lh-body) var(--mg-font-sans); color: var(--mg-ink-soft); max-width: 740px; text-wrap: pretty; } .mg-body { font: var(--mg-weight-regular) var(--mg-text-body)/var(--mg-lh-body) var(--mg-font-sans); color: var(--mg-text-muted); text-wrap: pretty; } .mg-eyebrow { display: block; font: var(--mg-weight-regular) var(--mg-text-mono-lg)/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-eyebrow); text-transform: uppercase; color: var(--mg-text-muted); } .mg-caption { font: var(--mg-weight-regular) var(--mg-text-mono)/1.4 var(--mg-font-mono); letter-spacing: var(--mg-ls-mono); text-transform: uppercase; color: var(--mg-text-muted); } .mg-step-num { font: var(--mg-weight-bold) var(--mg-text-step-num)/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-numeral); } .mg-hand { font: var(--mg-weight-regular) var(--mg-text-hand)/var(--mg-lh-hand) var(--mg-font-hand); color: var(--mg-pen); letter-spacing: 0; }  .mg-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-top: 28px; border-top: var(--mg-rule); margin-bottom: var(--mg-heading-gap); } .mg-section-head--plain { border-top: 0; padding-top: 0; } .mg-section-head__title { display: flex; align-items: flex-start; gap: 20px; } .mg-section-head__num { padding-top: 8px; font: var(--mg-weight-regular) var(--mg-text-mono-lg)/1 var(--mg-font-mono); letter-spacing: .04em; } @media (max-width: 767px) { .mg-section-head { flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 22px; } .mg-section-head__title { gap: 12px; } .mg-section-head__num { padding-top: 5px; } }  .mg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 58px; padding: 0 30px; border-radius: var(--mg-radius-pill); border: var(--mg-border-w) solid var(--mg-ink); background: transparent; color: var(--mg-ink); font: var(--mg-weight-semibold) 17px/1 var(--mg-font-sans); text-decoration: none; box-sizing: border-box; cursor: pointer; white-space: nowrap; transition: background var(--mg-dur-hover), border-color var(--mg-dur-hover), color var(--mg-dur-hover); } .mg-btn:hover { background: var(--mg-btn-ghost-hover); color: var(--mg-ink); } .mg-btn--primary { background: var(--mg-btn-bg); color: var(--mg-paper); } .mg-btn--primary:hover { background: var(--mg-btn-bg-hover); border-color: var(--mg-btn-bg-hover); color: var(--mg-paper); } .mg-btn--sm { height: 48px; padding: 0 24px; font-size: 15px; } .mg-btn--lg { height: 66px; padding: 0 36px; font-size: 19px; gap: 12px; } .mg-btn--block { display: flex; width: 100%; } .mg-btn--on-dark { border-color: var(--mg-paper); color: var(--mg-paper); } .mg-link { display: inline-flex; align-items: center; gap: 10px; padding: 10px 0; font: var(--mg-weight-semibold) 17px/1 var(--mg-font-sans); color: var(--mg-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; } .mg-link:hover { color: var(--mg-pen); } .mg-chip { appearance: none; display: inline-flex; align-items: center; height: 46px; padding: 0 22px; border-radius: var(--mg-radius-pill); border: var(--mg-border-w) solid var(--mg-ink); background: transparent; color: var(--mg-ink); font: var(--mg-weight-medium) var(--mg-text-small)/1 var(--mg-font-sans); cursor: pointer; white-space: nowrap; transition: background var(--mg-dur-hover); } .mg-chip:hover { background: var(--mg-highlighter); } .mg-chip.is-active, .mg-chip[aria-pressed="true"] { background: var(--mg-ink); color: var(--mg-paper); font-weight: var(--mg-weight-semibold); } @media (max-width: 767px) { .mg-btn { height: 56px; font-size: 16px; } .mg-chip { height: 44px; padding: 0 18px; } }  .mg-mark { position: relative; display: inline-block; } .mg-mark__svg { position: absolute; overflow: visible; pointer-events: none; color: var(--mg-pen); }  .mg-mark__svg, .mg-note__arrow, .mg-spinner { min-height: 0; } .mg-mark--circle .mg-mark__svg { left: -7%; top: -12%; width: 114%; height: 126%; } .mg-mark--underline .mg-mark__svg { left: -2%; bottom: -16px; width: 104%; height: 22px; } .mg-mark--underline-thin .mg-mark__svg { left: -2px; bottom: -8px; width: calc(100% + 6px); height: 14px; } .mg-mark--strike { color: var(--mg-pencil); } .mg-mark--strike .mg-mark__svg { left: -3%; top: 4%; width: 106%; height: 88%; }  .mg-draw { stroke-dasharray: 1 2; stroke-dashoffset: 1.05; animation: mg-draw var(--mg-dur, 950ms) var(--mg-ease-pen) var(--mg-delay, 450ms) forwards; } @media (prefers-reduced-motion: reduce) { .mg-draw { animation: none; stroke-dashoffset: 0; } } .mg-highlight { padding: 0 3px; background: var(--mg-highlight-bg); -webkit-box-decoration-break: clone; box-decoration-break: clone; color: var(--mg-ink); } .mg-note { display: inline-flex; align-items: center; gap: 6px; transform: rotate(var(--mg-tilt-note)); font: var(--mg-weight-regular) var(--mg-text-hand)/var(--mg-lh-hand) var(--mg-font-hand); color: var(--mg-pen); letter-spacing: 0; white-space: nowrap; text-decoration: none; } .mg-note--lg { font-size: var(--mg-text-hand-lg); } .mg-note__arrow { flex: none; width: 48px; height: 28px; overflow: visible; color: var(--mg-pen); } .mg-tape { position: absolute; z-index: 2; width: 104px; height: 28px; background: var(--mg-tape); clip-path: var(--mg-tape-clip); transform: rotate(-4deg); pointer-events: none; } .mg-tape--strong { background: var(--mg-tape-strong); } .mg-tape--sm { width: 84px; height: 24px; } .mg-tape--lg { width: 130px; height: 34px; } .mg-tape--top { top: -14px; left: 50%; margin-left: -52px; } .mg-tape--tl { top: -12px; left: 24px; transform: rotate(-8deg); } .mg-tape--tr { top: -12px; right: 24px; left: auto; transform: rotate(6deg); } .mg-stamp { display: inline-flex; flex-direction: column; align-items: center; gap: 7px; padding: 13px 20px 11px; border: 2.5px solid var(--mg-pen); border-radius: 8px; box-shadow: inset 0 0 0 3px var(--mg-paper), inset 0 0 0 4.5px var(--mg-pen); transform: rotate(var(--mg-tilt-stamp)); color: var(--mg-pen); font: var(--mg-weight-bold) 20px/1 var(--mg-font-mono); letter-spacing: .18em; text-transform: uppercase; } .mg-stamp__date { font-size: 13px; letter-spacing: .14em; } @media (max-width: 767px) { .mg-stamp { gap: 6px; padding: 10px 15px 9px; border-radius: 7px; box-shadow: inset 0 0 0 2.5px var(--mg-paper), inset 0 0 0 4px var(--mg-pen); font-size: 16px; letter-spacing: .16em; } .mg-stamp__date { font-size: 11px; letter-spacing: .12em; } } .mg-blob { position: absolute; z-index: 0; background: var(--mg-highlighter); border-radius: var(--mg-radius-blob); transform: rotate(-8deg); pointer-events: none; } .mg-blob--alt { border-radius: var(--mg-radius-blob-alt); transform: rotate(7deg); }   .mg-index-card { position: relative; padding: 0 44px 40px; background: var(--mg-paper-card); color: var(--mg-ink); border-radius: var(--mg-radius-xs); box-shadow: var(--mg-shadow-card); transform: rotate(calc(var(--mg-tilt-s) * -1)); } .mg-index-card--right { transform: rotate(var(--mg-tilt-s)); } .mg-index-card--warm { box-shadow: var(--mg-shadow-card-warm); } .mg-index-card--on-blue { box-shadow: var(--mg-shadow-card-blue); } .mg-index-card__head { display: flex; align-items: flex-end; height: 72px; margin: 0 -44px; padding: 0 44px 12px; box-sizing: border-box; border-bottom: var(--mg-rule-card-head); font: var(--mg-weight-regular) 13px/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-eyebrow); text-transform: uppercase; color: var(--mg-text-muted); } .mg-index-card__lines { margin: 0 -44px; padding: 0 44px; background-image: var(--mg-ruled-38); }  .mg-index-card__head, .mg-index-card__lines, .mg-about-card__head, .mg-about-card__lines, .mg-cookie__head, .mg-cookie-prefs__head, .mg-contact-sheet__head, .mg-contact-next__head, .mg-privacy-doc__head { align-self: stretch; width: auto; max-width: none; } .mg-index-card__quote { margin: 0; font: var(--mg-weight-medium) var(--mg-text-quote)/38px var(--mg-font-sans); letter-spacing: -0.005em; text-wrap: pretty; } .mg-index-card__sig { display: block; margin-top: 38px; font: var(--mg-weight-regular) var(--mg-text-signature)/38px var(--mg-font-hand); color: var(--mg-pen); } .mg-index-card__role { display: block; font: var(--mg-weight-regular) 13px/38px var(--mg-font-mono); letter-spacing: var(--mg-ls-mono); text-transform: uppercase; color: var(--mg-text-muted); } @media (max-width: 767px) { .mg-index-card { padding: 0 24px 28px; transform: rotate(-1.4deg); } .mg-index-card--right { transform: rotate(1.2deg); } .mg-index-card__head { height: 56px; margin: 0 -24px; padding: 0 24px 10px; font-size: 11.5px; } .mg-index-card__lines { margin: 0 -24px; padding: 0 24px; background-image: var(--mg-ruled-32); } .mg-index-card__quote { line-height: 32px; } .mg-index-card__sig { margin-top: 32px; line-height: 32px; } .mg-index-card__role { line-height: 32px; font-size: 11.5px; } } .mg-sticky { padding: 14px 16px 16px; background: var(--mg-highlighter); color: var(--mg-ink); box-shadow: var(--mg-shadow-sticky); transform: rotate(-2deg); font: var(--mg-weight-regular) var(--mg-text-small)/1.45 var(--mg-font-sans); } .mg-sticky__hand { display: block; margin-bottom: 4px; font: var(--mg-weight-regular) 28px/1 var(--mg-font-hand); color: var(--mg-pen); } .mg-sticky--note { padding: 9px 12px 8px; box-shadow: var(--mg-shadow-sticky-sm); transform: rotate(-1.5deg); font: var(--mg-weight-regular) 13px/1.3 var(--mg-font-mono); } .mg-label { display: inline-block; align-self: flex-start; padding: 7px 10px 6px; background: var(--mg-ink); color: var(--mg-paper-card); font: var(--mg-weight-bold) 13px/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-label); text-transform: uppercase; } .mg-sheet { position: relative; background: var(--mg-paper-card); border: var(--mg-rule); border-radius: var(--mg-radius-xl); }  .mg-ticket { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--mg-paper-card); border: var(--mg-rule); border-radius: 16px; } .mg-ticket__part { position: relative; padding: 36px 44px; display: flex; flex-direction: column; gap: 18px; } .mg-ticket__part + .mg-ticket__part { border-left: var(--mg-rule-dashed); } .mg-ticket__notch { position: absolute; left: -16px; width: 30px; height: 16px; background: var(--notch-bg, var(--mg-paper)); border: var(--mg-rule); box-sizing: border-box; } .mg-ticket__notch--top { top: -1.5px; border-top: 0; border-radius: 0 0 15px 15px; } .mg-ticket__notch--bottom { bottom: -1.5px; border-bottom: 0; border-radius: 15px 15px 0 0; } .mg-ticket__value { font: var(--mg-weight-black) var(--mg-text-price)/1 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: -0.025em; } @media (max-width: 767px) { .mg-ticket { grid-template-columns: minmax(0, 1fr); border-radius: var(--mg-radius-l); } .mg-ticket__part { padding: 24px; gap: 14px; } .mg-ticket__part + .mg-ticket__part { border-left: 0; border-top: var(--mg-rule-dashed); } .mg-ticket__notch { display: none; } }  .mg-folder { position: relative; display: flex; flex-direction: column; gap: 18px; margin-top: 36px; padding: 36px 32px; background: var(--mg-paper-card); border: var(--mg-rule); border-radius: 0 var(--mg-radius-l) var(--mg-radius-l) var(--mg-radius-l); } .mg-folder--blush { background: var(--mg-blush); } .mg-folder--kraft { background: var(--mg-kraft); } .mg-folder__tab { position: absolute; left: -1.5px; top: -36px; height: 38px; padding: 0 18px; display: flex; align-items: center; background: inherit; border: var(--mg-rule); border-bottom: 0; border-radius: 12px 12px 0 0; box-sizing: border-box; font: var(--mg-weight-regular) 13px/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-eyebrow); text-transform: uppercase; } .mg-folder__title { margin: 0; font: var(--mg-weight-black) var(--mg-text-folder)/.95 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: -0.025em; } .mg-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; padding: 14px 0; border-top: var(--mg-rule-dashed-thin); border-bottom: var(--mg-rule-dashed-thin); } .mg-price-row__price { font: var(--mg-weight-black) 30px/1 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: -0.02em; } .mg-price-row__meta { font: var(--mg-weight-regular) 14px/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-mono); text-transform: uppercase; color: var(--mg-text-muted); }  .mg-receipt { padding: 40px 40px 52px; background: var(--mg-paper-card); color: var(--mg-ink); font: var(--mg-weight-regular) 17px/1.4 var(--mg-font-mono); clip-path: var(--mg-receipt-clip); } .mg-receipt-wrap { position: relative; transform: rotate(var(--mg-tilt-s)); filter: var(--mg-shadow-receipt); } .mg-receipt__head { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 22px; border-bottom: var(--mg-rule-dashed); text-align: center; } .mg-receipt__rows { display: flex; flex-direction: column; gap: 12px; padding: 22px 0; } .mg-receipt__row { display: flex; align-items: flex-end; gap: 10px; } .mg-receipt__leader { flex: 1; min-width: 24px; margin-bottom: 5px; border-bottom: 2px dotted var(--mg-leader); } .mg-receipt__total { display: flex; align-items: flex-end; gap: 10px; padding-top: 20px; border-top: var(--mg-rule-dashed); font-weight: var(--mg-weight-bold); }  .mg-tick { width: 36px; height: 36px; margin-top: -6px; overflow: visible; color: var(--mg-pen); } .mg-feature { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; } .mg-feature__text { display: flex; flex-direction: column; gap: 10px; } .mg-checklist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .mg-checklist li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font: var(--mg-weight-regular) 16px/1.45 var(--mg-font-sans); } .mg-checklist li::before { content: ""; width: 19px; height: 19px; margin-top: 2px; background: var(--mg-icon-tick) center / contain no-repeat; } .mg-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; } .mg-steps__path { position: absolute; left: 0; top: 24px; width: 100%; height: 40px; overflow: visible; color: var(--mg-pen); } .mg-step { position: relative; display: flex; flex-direction: column; gap: 14px; } .mg-step__num { align-self: flex-start; padding-right: 16px; background: var(--step-bg, var(--mg-blush)); } .mg-step__title { margin: 12px 0 0; } @media (max-width: 991px) { .mg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mg-steps__path { display: none; } } @media (max-width: 767px) { .mg-steps { grid-template-columns: minmax(0, 1fr); gap: 32px; } .mg-step { gap: 8px; padding-top: 20px; border-top: var(--mg-rule); } .mg-step__num { padding-right: 0; background: none; } .mg-step__title { margin-top: 6px; } }  .mg-work-card { position: relative; display: flex; flex-direction: column; gap: 22px; color: var(--mg-ink); text-decoration: none; transition: transform var(--mg-dur-lift) var(--mg-ease-out); } .mg-work-card:hover { transform: var(--mg-lift); color: var(--mg-ink); } .mg-work-card:nth-child(even):hover { transform: translateY(-6px) rotate(.6deg); } .mg-work-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--mg-paper-shade); border: var(--mg-rule); border-radius: var(--mg-radius-s); overflow: hidden; } .mg-work-card__media img { width: 100%; height: 100%; object-fit: cover; } .mg-work-card__body { display: flex; flex-direction: column; gap: 10px; } .mg-work-card__name { font: var(--mg-weight-bold) var(--mg-text-card-title)/1.1 var(--mg-font-sans); letter-spacing: var(--mg-ls-title); } .mg-work-card__meta { font: var(--mg-weight-regular) 14px/1.5 var(--mg-font-mono); letter-spacing: .03em; text-transform: uppercase; color: var(--mg-text-muted); }  .mg-faq { border-bottom: var(--mg-rule); } .mg-faq__item { border-top: var(--mg-rule); } .mg-faq__q { list-style: none; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px 0; background: none; border: 0; color: var(--mg-ink); text-align: left; cursor: pointer; font: var(--mg-weight-semibold) var(--mg-text-h4)/1.25 var(--mg-font-sans); letter-spacing: var(--mg-ls-title); } .mg-faq__q::-webkit-details-marker { display: none; } .mg-faq__q:hover { color: var(--mg-pen); } .mg-faq__icon { flex: none; width: 44px; height: 44px; border-radius: 50%; border: var(--mg-border-w) solid currentColor; display: flex; align-items: center; justify-content: center; font: var(--mg-weight-regular) 26px/1 var(--mg-font-sans); box-sizing: border-box; } .mg-faq__icon::before { content: "+"; } .mg-faq__item[open] .mg-faq__icon::before, .mg-faq__item.is-open .mg-faq__icon::before { content: "−"; } .mg-faq__a { margin: -6px 0 32px; max-width: 600px; font: var(--mg-weight-regular) var(--mg-text-body-lg)/1.6 var(--mg-font-sans); color: var(--mg-text-muted); } @media (max-width: 767px) { .mg-faq__q { padding: 20px 0; gap: 16px; } .mg-faq__icon { width: 40px; height: 40px; font-size: 24px; } .mg-faq__a { margin: -4px 0 22px; } }  .mg-browser { background: var(--mg-paper-card); border: var(--mg-rule); border-radius: var(--mg-radius-m); overflow: hidden; box-shadow: var(--mg-shadow-print); } .mg-browser__bar { height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: var(--mg-rule); } .mg-browser__dot { width: 8px; height: 8px; border-radius: 50%; border: var(--mg-border-w) solid var(--mg-ink); box-sizing: border-box; } .mg-browser__url { margin-left: 12px; padding: 3px 10px; border: 1px solid var(--mg-ink); border-radius: var(--mg-radius-pill); font: var(--mg-weight-regular) 10px/1 var(--mg-font-mono); } .mg-browser__screen { position: relative; aspect-ratio: 4 / 3; background: var(--mg-paper-shade); } .mg-browser__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .mg-browser--lg { border-radius: 12px; box-shadow: var(--mg-shadow-frame); } .mg-browser--lg .mg-browser__bar { height: 40px; gap: 8px; padding: 0 16px; } .mg-browser--lg .mg-browser__dot { width: 10px; height: 10px; } .mg-browser--lg .mg-browser__url { margin-left: 14px; padding: 5px 14px; font-size: 12px; } .mg-browser--lg .mg-browser__screen { aspect-ratio: 16 / 10; } .mg-phone { width: 260px; height: 540px; padding: 10px; background: var(--mg-ink); border-radius: 40px; box-sizing: border-box; box-shadow: var(--mg-shadow-device-dark); } .mg-phone__screen { position: relative; height: 100%; border-radius: 31px; overflow: hidden; background: var(--mg-paper-shade); } .mg-phone__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .mg-print { position: relative; padding: 16px 16px 0; background: var(--mg-paper-card); box-shadow: 0 26px 40px -22px rgba(23, 22, 20, .55); transform: rotate(-2.5deg); } .mg-print__photo { position: relative; aspect-ratio: 420 / 476; background: var(--mg-photo); overflow: hidden; } .mg-print__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); } .mg-print__caption { height: 62px; display: flex; align-items: center; }  .mg-field { display: flex; flex-direction: column; gap: 4px; } .mg-field__label { font: var(--mg-weight-bold) 14px/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-label); text-transform: uppercase; } .mg-field__optional { font-weight: var(--mg-weight-regular); color: var(--mg-text-muted); } .mg-field__input { width: 100%; height: 52px; padding: 0 2px; border: 0; border-bottom: var(--mg-rule); border-radius: 0; background: transparent; font: var(--mg-weight-regular) var(--mg-text-mono-input)/1 var(--mg-font-mono); color: var(--mg-ink); box-sizing: border-box; outline: none; } .mg-field__input:focus { border-bottom-color: var(--mg-pen); box-shadow: 0 1.5px 0 var(--mg-pen); } .mg-field__input::placeholder { color: var(--mg-pencil); } .mg-form-q { font: var(--mg-weight-black) var(--mg-text-form-q)/1 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: -0.02em; }  .mg-check { position: relative; display: flex; align-items: center; gap: 16px; min-height: 58px; border-bottom: 1px solid var(--mg-rule-blue-strong); cursor: pointer; font: var(--mg-weight-regular) 18px/1.3 var(--mg-font-sans); } .mg-check:hover { color: var(--mg-pen); } .mg-check input { position: absolute; opacity: 0; width: 1px; height: 1px; } .mg-check__box { position: relative; flex: none; width: 24px; height: 24px; background: var(--mg-icon-box) center / contain no-repeat; }  .mg-check__box::after { content: ""; position: absolute; left: -2px; top: -13px; width: 34px; height: 34px; background: var(--mg-icon-tick) center / contain no-repeat; clip-path: inset(0 100% 0 0); } .mg-check input:checked + .mg-check__box::after { clip-path: inset(0); transition: clip-path var(--mg-dur-tick) var(--mg-ease-pen); } .mg-check input:focus-visible + .mg-check__box { outline: 2px solid var(--mg-pen); outline-offset: 3px; }  .mg-choice { position: relative; display: inline-flex; align-items: center; height: 50px; padding: 0 24px; border: var(--mg-border-w) solid var(--mg-choice-border); border-radius: var(--mg-radius-pill); cursor: pointer; box-sizing: border-box; font: var(--mg-weight-medium) 17px/1 var(--mg-font-sans); } .mg-choice:hover { color: var(--mg-pen); } .mg-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; } .mg-choice:has(input:checked), .mg-choice.is-selected { border-color: transparent; }  @property --mg-ring-sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; } @keyframes mg-ring-draw { from { --mg-ring-sweep: 0deg; } to { --mg-ring-sweep: 360deg; } } .mg-choice::after { content: ""; position: absolute; left: -9%; top: -22%; width: 118%; height: 144%; background: var(--mg-mark-ring) center / 100% 100% no-repeat; -webkit-mask: conic-gradient(from 250deg, #000 var(--mg-ring-sweep), transparent 0); mask: conic-gradient(from 250deg, #000 var(--mg-ring-sweep), transparent 0); pointer-events: none; } .mg-choice:has(input:checked)::after, .mg-choice.is-selected::after { --mg-ring-sweep: 360deg; animation: mg-ring-draw var(--mg-dur-ring) var(--mg-ease-pen) both; } .mg-choice:has(input:focus-visible) { outline: 2px solid var(--mg-pen); outline-offset: 3px; } .mg-notebook { width: 100%; min-height: 262px; padding: 10px 24px 0 72px; border: var(--mg-rule); border-radius: var(--mg-radius-s); background-color: var(--mg-paper-note); background-image: var(--mg-notebook); background-attachment: local; font: var(--mg-weight-regular) 19px/42px var(--mg-font-mono); color: var(--mg-ink); box-sizing: border-box; resize: vertical; outline: none; } .mg-notebook:focus { border-color: var(--mg-pen); box-shadow: 0 0 0 1.5px var(--mg-pen); }  .mg-field__input[aria-invalid="true"], .mg-field.is-error .mg-field__input { border-bottom-color: var(--mg-error); box-shadow: 0 1.5px 0 var(--mg-error); } .mg-notebook[aria-invalid="true"], .mg-notebook.is-error { border-color: var(--mg-error); box-shadow: 0 0 0 1.5px var(--mg-error); } .mg-field__error { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font: var(--mg-weight-regular) 14.5px/1.4 var(--mg-font-mono); color: var(--mg-error); } .mg-field__error::before { content: ""; flex: none; width: 20px; height: 9px; margin-top: 5px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10'%3E%3Cpath d='M1 6 C4 1 7 1 9 5 S14 9 17 5 S20 2 21 3' fill='none' stroke='%23B23A25' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; } .mg-field__wrap { position: relative; display: block; } .mg-field.is-valid .mg-field__wrap::after { content: ""; position: absolute; right: 4px; top: 10px; width: 26px; height: 26px; background: var(--mg-icon-tick) center / contain no-repeat; } .mg-check-group.is-error .mg-check__box { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 3 C9 2.2 16 2.6 21.5 2.4 C21.9 9 21.4 15 21.8 21.6 C15 21.9 8 21.2 2.2 21.7 C2.6 15 2.1 9 2.5 3 Z' fill='none' stroke='%23B23A25' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); } .mg-error-summary { align-self: flex-start; max-width: 560px; padding: 22px 28px 24px; background: var(--mg-highlighter); box-shadow: var(--mg-shadow-sticky); transform: rotate(-1deg); display: flex; flex-direction: column; gap: 14px; outline: none; } .mg-error-summary__title { font: var(--mg-weight-black) 30px/1 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: -0.02em; } .mg-error-summary__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; } .mg-error-summary__list li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: baseline; } .mg-error-summary__field { font: var(--mg-weight-bold) 13px/1.3 var(--mg-font-mono); letter-spacing: var(--mg-ls-eyebrow); text-transform: uppercase; } .mg-error-summary__list a { font: var(--mg-weight-medium) 17px/1.4 var(--mg-font-sans); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; } .mg-form-alert { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; padding: 20px 24px 22px; border: var(--mg-border-w) solid var(--mg-error); border-radius: var(--mg-radius-s); background: var(--mg-paper-note); font: var(--mg-weight-regular) 17px/1.5 var(--mg-font-sans); color: var(--mg-ink-soft); } .mg-form-alert__title { display: block; margin-bottom: 6px; font: var(--mg-weight-bold) 19px/1.3 var(--mg-font-sans); color: var(--mg-error); } .mg-btn.is-sending, .mg-btn[aria-busy="true"] { cursor: progress; pointer-events: none; } .mg-spinner { flex: none; width: 30px; height: 18px; overflow: visible; } .mg-spinner path { stroke-dasharray: .55 .45; animation: mg-pen-spin 1.1s linear infinite; } @keyframes mg-pen-spin { to { stroke-dashoffset: -1; } } @media (prefers-reduced-motion: reduce) { .mg-spinner path { animation: none; } } .mg-form-sending { opacity: .55; transition: opacity .2s; pointer-events: none; } @media (max-width: 767px) { .mg-error-summary__list li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }  .mg-header { position: relative; z-index: 5; height: var(--mg-header-h); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .mg-header__nav { display: flex; align-items: center; gap: 44px; } .mg-header__links { display: flex; gap: 36px; font: var(--mg-weight-medium) var(--mg-text-nav)/1 var(--mg-font-sans); } .mg-header__links a { text-decoration: none; }  .mg-header__links a[aria-current="page"], .parent-pageid-42 .mg-header__links a[href="/contact/"], :is(.tax-genre, .single-project) .mg-header__links a[href="/work/"] { position: relative; font-weight: var(--mg-weight-bold); } .mg-header__links a[aria-current="page"]::after, .parent-pageid-42 .mg-header__links a[href="/contact/"]::after, :is(.tax-genre, .single-project) .mg-header__links a[href="/work/"]::after { content: ""; position: absolute; left: -14px; top: -12px; width: calc(100% + 28px); height: 40px; background: var(--mg-mark-ring-nav) center / 100% 100% no-repeat; pointer-events: none; } .mg-mobile-menu a[aria-current="page"], .parent-pageid-42 .mg-mobile-menu a[href="/contact/"], :is(.tax-genre, .single-project) .mg-mobile-menu a[href="/work/"] { color: var(--mg-pen); } .mg-mobile-menu a[aria-current="page"] small, .parent-pageid-42 .mg-mobile-menu a[href="/contact/"] small, :is(.tax-genre, .single-project) .mg-mobile-menu a[href="/work/"] small { font-size: 0; } .mg-mobile-menu a[aria-current="page"] small::after, .parent-pageid-42 .mg-mobile-menu a[href="/contact/"] small::after, :is(.tax-genre, .single-project) .mg-mobile-menu a[href="/work/"] small::after { content: "you are here"; font: var(--mg-weight-regular) 20px/1 var(--mg-font-hand); }  :is(.single-post, .category) .mg-header__links a[href="/blog/"] { position: relative; font-weight: var(--mg-weight-bold); } :is(.single-post, .category) .mg-header__links a[href="/blog/"]::after { content: ""; position: absolute; left: -14px; top: -12px; width: calc(100% + 28px); height: 40px; background: var(--mg-mark-ring-nav) center / 100% 100% no-repeat; pointer-events: none; } :is(.single-post, .category) .mg-mobile-menu a[href="/blog/"] { color: var(--mg-pen); } :is(.single-post, .category) .mg-mobile-menu a[href="/blog/"] small { font-size: 0; } :is(.single-post, .category) .mg-mobile-menu a[href="/blog/"] small::after { content: "you are here"; font: var(--mg-weight-regular) 20px/1 var(--mg-font-hand); } .mg-wordmark { position: relative; display: block; padding: 6px 0; color: var(--mg-ink); text-decoration: none; } .mg-wordmark__name { display: block; font: var(--mg-weight-black) 30px/1 var(--mg-font-sans); font-stretch: var(--mg-stretch-wide); letter-spacing: var(--mg-ls-wordmark); } .mg-wordmark__reg { position: relative; top: -13px; margin-left: 2px; font-size: 12px; font-weight: var(--mg-weight-semibold); letter-spacing: 0; } .mg-wordmark__tag { position: absolute; left: 94px; top: 25px; font: var(--mg-weight-regular) 27px/1 var(--mg-font-hand); color: var(--mg-pen); transform: rotate(-5deg); white-space: nowrap; } .mg-menu-btn { display: none; appearance: none; width: 44px; height: 44px; flex: none; padding: 0; border: var(--mg-border-w) solid var(--mg-ink); background: transparent; border-radius: 50%; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; box-sizing: border-box; } .mg-menu-btn span { display: block; width: 16px; height: 2px; background: var(--mg-ink); } .mg-mobile-menu { margin: 0 0 8px; padding: 6px 20px; background: var(--mg-paper-card); border: var(--mg-rule); border-radius: var(--mg-radius-l); display: flex; flex-direction: column; } .mg-mobile-menu a { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--mg-rule-hair); font: var(--mg-weight-black) 30px/1 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: -0.02em; text-decoration: none; } .mg-mobile-menu a:last-child { border-bottom: 0; } .mg-mobile-menu[hidden] { display: none; } @media (min-width: 992px) { .mg-mobile-menu { display: none; } } .mg-mobile-menu small { font: var(--mg-weight-regular) 13px/1 var(--mg-font-mono); letter-spacing: 0; } @media (max-width: 991px) { .mg-header__links { display: none; } .mg-header__nav { gap: 8px; } .mg-menu-btn { display: flex; } .mg-header__nav .mg-btn { height: 44px; padding: 0 15px; font-size: 13.5px; } .mg-wordmark { padding: 0; } .mg-wordmark__name { font-size: 22px; } .mg-wordmark__reg { display: none; } .mg-wordmark__tag { left: 60px; top: 15px; font-size: 20px; } } .mg-footer { position: relative; padding: 96px 0 44px; background: var(--mg-ink); color: var(--mg-text-on-dark); } .mg-footer a { color: var(--mg-text-on-dark); text-decoration: none; } .mg-footer a:hover { color: var(--mg-highlighter); } .mg-footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; margin-bottom: 88px; } .mg-footer__brand { display: flex; flex-direction: column; gap: 36px; } .mg-footer__mark { position: relative; padding-bottom: 12px; } .mg-footer__mark .mg-wordmark__name { font-size: 72px; letter-spacing: -0.05em; } .mg-footer__mark .mg-wordmark__reg { top: -32px; margin-left: 4px; font-size: 22px; } .mg-footer__mark .mg-wordmark__tag { left: 250px; top: 50px; font-size: 50px; color: var(--mg-highlighter); } .mg-footer__email { align-self: flex-start; padding: 6px 0; font: var(--mg-weight-medium) 20px/1 var(--mg-font-sans); text-decoration: underline !important; text-underline-offset: 6px; text-decoration-thickness: 1.5px; } .mg-footer__cols { display: flex; gap: 96px; padding-top: 14px; } .mg-footer__col { display: flex; flex-direction: column; gap: 16px; font: var(--mg-weight-medium) 17px/1 var(--mg-font-sans); } .mg-footer__heading { margin-bottom: 6px; font: var(--mg-weight-regular) 13px/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-eyebrow); text-transform: uppercase; color: var(--mg-text-on-dark-muted); } .mg-footer__legal { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-top: 28px; border-top: 1px solid var(--mg-rule-on-dark); } .mg-footer__small { display: flex; flex-direction: column; gap: 8px; font: var(--mg-weight-regular) 13px/1.4 var(--mg-font-mono); letter-spacing: .04em; color: var(--mg-text-on-dark-muted); } .mg-barcode { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 14px 8px; background: var(--mg-paper); } .mg-barcode__bars { display: block; width: 148px; height: 44px; background: var(--mg-barcode); } .mg-barcode__num { font: var(--mg-weight-regular) 10px/1 var(--mg-font-mono); letter-spacing: .14em; color: var(--mg-ink); } @media (max-width: 991px) { .mg-footer__top { flex-direction: column; gap: 48px; margin-bottom: 48px; } .mg-footer__cols { width: 100%; } } @media (max-width: 767px) { .mg-footer { padding: 72px 0 32px; } .mg-footer__brand { gap: 26px; } .mg-footer__mark { padding-bottom: 20px; } .mg-footer__mark .mg-wordmark__name { font-size: 46px; } .mg-footer__mark .mg-wordmark__tag { left: 96px; top: 34px; font-size: 32px; } .mg-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; width: 100%; } .mg-footer__col { gap: 2px; font-size: 16px; } .mg-footer__col a { padding: 10px 0; } .mg-barcode__bars { width: 104px; height: 32px; } }  .mg-cookie { position: fixed; z-index: 9990; left: 40px; bottom: 40px; width: 480px; max-width: calc(100vw - 24px); padding: 0 32px 26px; box-sizing: border-box; background: var(--mg-paper-card); color: var(--mg-ink); border-radius: var(--mg-radius-xs); box-shadow: var(--mg-shadow-card); transform: rotate(-1deg); } .mg-cookie__head { height: 60px; margin: 0 -32px; padding: 0 32px 11px; display: flex; align-items: flex-end; justify-content: space-between; box-sizing: border-box; border-bottom: var(--mg-rule-card-head); font: var(--mg-weight-regular) 13px/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-eyebrow); text-transform: uppercase; color: var(--mg-text-muted); } .mg-cookie__text { margin: 18px 0 0; font: var(--mg-weight-regular) 17px/1.5 var(--mg-font-sans); color: var(--mg-ink-soft); } .mg-cookie__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; } .mg-cookie__actions .mg-btn { height: 50px; padding: 0 12px; font-size: 16px; } .mg-cookie__links { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 10px; } .mg-cookie-tab { position: fixed; z-index: 9990; left: 40px; bottom: 0; height: 42px; padding: 0 20px; display: flex; align-items: center; background: var(--mg-paper-card); color: var(--mg-ink); border: var(--mg-rule); border-bottom: 0; border-radius: 12px 12px 0 0; cursor: pointer; font: var(--mg-weight-bold) 13px/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-eyebrow); text-transform: uppercase; transition: height var(--mg-dur-hover), background var(--mg-dur-hover); } .mg-cookie-tab:hover { height: 48px; background: var(--mg-highlighter); } .mg-cookie-prefs { position: relative; width: 680px; max-width: calc(100vw - 24px); padding: 0 48px 40px; box-sizing: border-box; background: var(--mg-paper-card); border: var(--mg-rule); border-radius: var(--mg-radius-xl); } .mg-cookie-prefs__row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--mg-rule-blue-strong); } .mg-cookie-prefs__tag { padding-top: 5px; font: var(--mg-weight-bold) 12.5px/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-label); text-transform: uppercase; color: var(--mg-text-muted); } .mg-cookie-prefs__tag.is-on { color: var(--mg-pen); }  .mg-cookie[hidden], .mg-cookie-tab[hidden] { display: none; } .mg-cookie__links .mg-link { padding: 12px 0; font-size: 16px; background: none; border: 0; cursor: pointer; } .mg-cookie__links a:last-child { padding: 12px 0; font: var(--mg-weight-regular) 13px/1 var(--mg-font-mono); letter-spacing: .06em; text-transform: uppercase; text-underline-offset: 4px; color: var(--mg-ink); } .brx-popup:has(.mg-cookie-prefs) .brx-popup-content { display: block; width: auto; max-width: none; height: auto; max-height: 100dvh; padding: 24px 12px; overflow-y: auto; background: none; box-shadow: none; } .brx-popup:has(.mg-cookie-prefs) .brx-popup-backdrop { background: rgba(23, 22, 20, .45); } .mg-cookie-prefs__head { margin: 0 -48px; padding: 34px 48px 18px; display: flex; justify-content: space-between; align-items: baseline; border-bottom: var(--mg-rule-dashed); font: var(--mg-weight-regular) 13px/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-label); text-transform: uppercase; color: var(--mg-text-muted); } .mg-cookie-prefs__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-top: 30px; } .mg-cookie-prefs__top h2 { margin: 0; font: var(--mg-weight-black) clamp(40px, 34.06px + 1.524vw, 56px)/.92 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: -0.035em; } .mg-cookie-prefs__close { flex: none; width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; border: var(--mg-rule); border-radius: 50%; background: transparent; color: var(--mg-ink); font: var(--mg-weight-regular) 22px/1 var(--mg-font-sans); cursor: pointer; } .mg-cookie-prefs__intro { margin: 18px 0 0; max-width: 520px; font: var(--mg-weight-regular) 17px/1.5 var(--mg-font-sans); color: var(--mg-text-muted); } .mg-cookie-prefs__list { display: flex; flex-direction: column; margin-top: 22px; border-top: var(--mg-rule); } .mg-cookie-prefs__row { cursor: pointer; } button.mg-cookie-prefs__row { width: 100%; margin: 0; padding-inline: 0; background: none; border: 0; border-bottom: 1px solid var(--mg-rule-blue-strong); font: inherit; color: inherit; text-align: left; } .mg-cookie-prefs__row[aria-disabled="true"] { cursor: default; } .mg-cookie-prefs__row:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 3px; } .mg-cookie-prefs__box { width: 24px; height: 24px; margin-top: 2px; background: var(--mg-icon-box) center / contain no-repeat; } .mg-cookie-prefs__box { position: relative; } .mg-cookie-prefs__box::after { content: ""; position: absolute; left: -2px; top: -13px; width: 34px; height: 34px; background: var(--mg-icon-tick) center / contain no-repeat; clip-path: inset(0 100% 0 0); } .mg-cookie-prefs__row[aria-pressed="true"] .mg-cookie-prefs__box::after { clip-path: inset(0); transition: clip-path var(--mg-dur-tick) var(--mg-ease-pen); } .mg-cookie-prefs__row[aria-disabled="true"] .mg-cookie-prefs__box { opacity: .5; } .mg-cookie-prefs__text { display: flex; flex-direction: column; gap: 6px; } .mg-cookie-prefs__name { font: var(--mg-weight-bold) 20px/1.2 var(--mg-font-sans); letter-spacing: -0.01em; } .mg-cookie-prefs__desc { font: var(--mg-weight-regular) 16px/1.5 var(--mg-font-sans); color: var(--mg-text-muted); } .mg-cookie-prefs__row .mg-cookie-prefs__tag::after { content: "Off"; } .mg-cookie-prefs__row[aria-pressed="true"] .mg-cookie-prefs__tag { color: var(--mg-pen); } .mg-cookie-prefs__row[aria-pressed="true"] .mg-cookie-prefs__tag::after { content: "On"; } .mg-cookie-prefs__row[aria-disabled="true"] .mg-cookie-prefs__tag { color: var(--mg-text-muted); } .mg-cookie-prefs__row[aria-disabled="true"] .mg-cookie-prefs__tag::after { content: "Always on"; } .mg-cookie-prefs__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; } @media (max-width: 767px) { .brx-popup:has(.mg-cookie-prefs) { align-items: flex-end; } .brx-popup:has(.mg-cookie-prefs) .brx-popup-content { width: 100%; max-height: 92dvh; padding: 16px 0 0; } .mg-cookie-prefs__head { margin: 0 -20px; padding: 26px 20px 14px; font-size: 11px; } .mg-cookie-prefs__top { margin-top: 22px; } .mg-cookie-prefs__name { font-size: 18px; } .mg-cookie-prefs__desc { font-size: 15px; } .mg-cookie-prefs__actions { flex-direction: column; align-items: stretch; } .mg-cookie-prefs__actions .mg-btn { width: 100%; } } @media (max-width: 767px) { .mg-cookie { left: 12px; right: 12px; bottom: 14px; width: auto; padding: 0 20px 14px; transform: rotate(-.6deg); } .mg-cookie__head { height: 50px; margin: 0 -20px; padding: 0 20px 10px; font-size: 11.5px; } .mg-cookie__text { margin-top: 14px; font-size: 15.5px; } .mg-cookie__actions { gap: 8px; margin-top: 16px; } .mg-cookie-tab { left: 12px; } .mg-cookie-prefs { width: 100%; max-width: none; padding: 0 20px 20px; border-radius: 18px 18px 0 0; border-width: 1.5px 0 0; } .mg-cookie-prefs__row { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 16px 0; } .mg-cookie-prefs__tag { grid-column: 2; padding-top: 0; } }   .mg-home-hero { display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: 40px; align-items: center; padding-top: 36px; } .mg-home-collage { position: relative; height: 640px; } .mg-home-about { display: grid; grid-template-columns: 540px minmax(0, 1fr); gap: 96px; align-items: center; } .mg-cta { display: flex; flex-direction: column; align-items: center; gap: 56px; text-align: center; } .mg-well { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px; font: 400 12px/1.3 var(--mg-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mg-graphite); text-align: center; } .mg-btn-row { display: flex; flex-wrap: wrap; gap: 14px; } @media (max-width: 991px) { .mg-home-hero, .mg-home-about { grid-template-columns: minmax(0, 1fr); gap: 48px; } .mg-home-collage { height: 520px; max-width: 500px; } } @media (max-width: 767px) { .mg-home-collage { height: 430px; } .mg-home-collage .mg-phone { transform: rotate(6deg) scale(.68) !important; transform-origin: 0 0; left: 214px !important; top: 168px !important; } .mg-home-collage .mg-browser { width: 300px !important; } .mg-home-hero-note { display: none; } .mg-home-hero h1 > br { display: none; }  .mg-cta { gap: 30px; } }  .mg-about-hero { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 64px; align-items: center; padding-top: 40px; } .mg-about-collage { position: relative; height: 640px; } .mg-about-why { display: flex; flex-wrap: wrap; gap: 88px; align-items: flex-start; } .mg-about-why__text { flex: 1 1 560px; margin: 0; max-width: 720px; font: var(--mg-weight-regular) clamp(20px, 17.03px + 0.762vw, 28px)/1.5 var(--mg-font-sans); letter-spacing: -0.008em; color: var(--mg-ink-soft); text-wrap: pretty; } .mg-about-why__frame { position: relative; flex: 0 0 472px; padding-top: 12px; } .mg-about-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; padding: 0 6px; } .mg-about-card { position: relative; min-height: 300px; display: flex; flex-direction: column; padding: 0 22px 28px; background: var(--mg-paper-card); border-radius: var(--mg-radius-xs); box-sizing: border-box; box-shadow: var(--mg-shadow-card-warm); } .mg-about-card__head { height: 60px; margin: 0 -22px; padding: 0 22px 10px; display: flex; align-items: flex-end; box-sizing: border-box; border-bottom: var(--mg-rule-card-head); font: var(--mg-weight-regular) 13px/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-eyebrow); text-transform: uppercase; color: var(--mg-text-muted); } .mg-about-card__lines { flex: 1; margin: 0 -22px; padding: 0 22px; background-image: var(--mg-ruled-32); } .mg-about-card__text { margin: 0; font: var(--mg-weight-bold) 23px/32px var(--mg-font-sans); letter-spacing: var(--mg-ls-title); text-wrap: pretty; } .mg-about-card .mg-tick { position: absolute; right: 20px; bottom: 20px; width: 34px; height: 34px; margin: 0; } .mg-about-list { display: none; } .mg-about-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) 26px; align-items: center; column-gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--mg-rule-blue-strong); } .mg-about-row:last-child { border-bottom: 0; } .mg-about-row__num { font: var(--mg-weight-bold) 17px/1 var(--mg-font-mono); letter-spacing: -0.04em; } .mg-about-row__text { font: var(--mg-weight-bold) 17px/1.35 var(--mg-font-sans); } .mg-about-row .mg-tick { width: 22px; height: 22px; margin: 0; } .mg-about-quote__mark { display: block; height: clamp(64px, 43.20px + 5.333vw, 120px); margin: clamp(20px, 17.03px + 0.762vw, 28px) 0 0 -10px; font: var(--mg-weight-black) clamp(150px, 101.71px + 12.381vw, 280px)/1 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); color: var(--mg-highlighter); } .mg-about-quote__text { margin: 0; padding: 0; border: 0; max-width: 1120px; font: var(--mg-weight-bold) clamp(31px, 20.97px + 2.571vw, 58px)/1.12 var(--mg-font-sans); font-stretch: var(--mg-stretch-step); letter-spacing: -0.025em; color: var(--mg-paper); text-wrap: pretty; } .mg-about-quote__foot { margin-top: clamp(36px, 22.63px + 3.429vw, 72px); display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; } .mg-about-quote__sig { font: var(--mg-weight-regular) clamp(44px, 38.80px + 1.333vw, 58px)/1 var(--mg-font-hand); color: var(--mg-highlighter); transform: rotate(-3deg); transform-origin: 0 50%; } .mg-about-quote__role { font: var(--mg-weight-regular) clamp(12px, 11.26px + 0.190vw, 14px)/1.4 var(--mg-font-mono); letter-spacing: var(--mg-ls-eyebrow); text-transform: uppercase; color: var(--mg-paper); } .mg-about-stamp { flex: none; padding: 16px 22px; border: 2.5px solid var(--mg-paper); border-radius: var(--mg-radius-s); box-shadow: inset 0 0 0 4px var(--mg-pen), inset 0 0 0 5.5px var(--mg-paper); font: var(--mg-weight-bold) 17px/1.3 var(--mg-font-mono); letter-spacing: var(--mg-ls-label); text-transform: uppercase; color: var(--mg-paper); transform: rotate(-4deg); } .mg-about-technote { display: flex; align-items: center; gap: 24px; } .mg-about-technote p { margin: 0; font: var(--mg-weight-regular) var(--mg-text-body-lg)/1.5 var(--mg-font-sans); color: var(--mg-text-muted); } @media (max-width: 991px) { .mg-about-hero { grid-template-columns: minmax(0, 1fr); gap: 48px; } .mg-about-collage { max-width: 480px; } .mg-about-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; } } @media (max-width: 767px) { .mg-about-hero { padding-top: 24px; gap: 0; } .mg-about-hero h1 > br, .mg-about-hero h1 .mg-note { display: none; } .mg-about-collage { height: auto; margin-top: 28px; padding: 0 6px; } .mg-about-why { flex-direction: column; gap: 28px; } .mg-about-why__text { flex: none; } .mg-about-why__frame { flex: none; width: 100%; margin-top: 8px; padding-top: 10px; } .mg-about-cards { display: none; } .mg-about-list { display: block; } .mg-about-quote__foot { flex-direction: column; align-items: flex-start; gap: 40px; } .mg-about-stamp { padding: 12px 16px; border-width: 2px; border-radius: 5px; box-shadow: inset 0 0 0 3px var(--mg-pen), inset 0 0 0 4.5px var(--mg-paper); font-size: 14px; letter-spacing: var(--mg-ls-eyebrow); transform: rotate(-3deg); } .mg-about-technote { flex-direction: column; align-items: flex-start; gap: 14px; } }  .mg-services-offer { display: grid; grid-template-columns: minmax(0, 1fr) 560px; background: var(--mg-paper-card); border: var(--mg-rule); border-radius: var(--mg-radius-xl); } .mg-services-offer__body { position: relative; display: flex; flex-direction: column; gap: 24px; padding: 52px 56px; } .mg-services-offer__media { position: relative; display: flex; align-items: center; padding: 56px 48px; border-left: var(--mg-rule-dashed); } .mg-services-offer__frame { position: relative; width: 100%; } .mg-services-offer .mg-price-row { gap: 8px 16px; padding: 18px 0; } .mg-services-offer .mg-price-row__price { font-size: clamp(32px, 27.54px + 1.143vw, 44px); letter-spacing: -0.025em; } .mg-services-offer .mg-price-row__meta { font-size: clamp(13px, 11.89px + 0.286vw, 16px); } .mg-services-offer .mg-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; margin-top: 4px; } .mg-services-offer .mg-checklist li { grid-template-columns: 24px minmax(0, 1fr); font-size: 17px; } .mg-services-offer .mg-checklist li::before { width: 22px; height: 22px; margin-top: 1px; } .mg-services-addons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); column-gap: 40px; margin-top: 112px; } .mg-services-addons .mg-folder { grid-row: span 6; display: grid; grid-template-rows: subgrid; row-gap: 18px; align-content: start; margin-top: 0; } .mg-services-addons .mg-link { justify-self: start; align-self: start; padding: 8px 0; font-size: 16px; } .mg-services-addons__shot { position: relative; margin-top: 6px; aspect-ratio: 16 / 10; border: var(--mg-rule); border-radius: var(--mg-radius-s); overflow: hidden; background: var(--mg-paper-shade); } .mg-services-included { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 96px; align-items: start; padding-top: 28px; border-top: var(--mg-rule); } .mg-services-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; } .mg-services-steps .mg-step-num { font-size: clamp(48px, 37.60px + 2.667vw, 76px); } .mg-services-steps .mg-sticky { margin-top: auto; } .mg-services-timeline { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: 88px; padding: 36px 48px; background: var(--mg-paper-card); border: var(--mg-rule); border-radius: 16px; } .mg-services-timeline__value { font: var(--mg-weight-black) clamp(32px, 27.54px + 1.143vw, 48px)/1.05 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: -0.025em; } .mg-services-notch { position: absolute; top: 50%; margin-top: -15px; width: 16px; height: 30px; background: var(--notch-bg, var(--mg-paper)); border: var(--mg-rule); box-sizing: border-box; } .mg-services-notch--left { left: -1.5px; border-left: 0; border-radius: 0 15px 15px 0; } .mg-services-notch--right { right: -1.5px; border-right: 0; border-radius: 15px 0 0 15px; } @media (min-width: 768px) { .mg-services-quote { max-width: 900px; margin: 0 auto; padding: 0 48px 44px; } .mg-services-quote .mg-index-card__head { height: 76px; margin: 0 -48px; padding: 0 48px 12px; } .mg-services-quote .mg-index-card__lines { margin: 0 -48px; padding: 0 48px; background-image: repeating-linear-gradient(to bottom, transparent 0 35px, var(--mg-rule-blue) 35px 36px, transparent 36px 46px); } .mg-services-quote .mg-index-card__quote { font-size: 30px; line-height: 46px; letter-spacing: -0.01em; } .mg-services-quote .mg-index-card__sig { margin-top: 46px; font-size: 50px; line-height: 46px; } .mg-services-quote .mg-index-card__role { font-size: 14px; line-height: 46px; } } @media (max-width: 991px) { .mg-services-offer, .mg-services-included { grid-template-columns: minmax(0, 1fr); } .mg-services-offer__media { order: -1; border-left: 0; } .mg-services-offer__body { border-top: var(--mg-rule-dashed); } .mg-services-included { gap: 28px; } .mg-services-addons { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 76px; margin-top: 76px; } .mg-services-addons .mg-folder { grid-row: auto; display: flex; flex-direction: column; } .mg-services-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .mg-services-offer { border-radius: var(--mg-radius-l); } .mg-services-offer__body { gap: 18px; padding: 28px 22px 26px; } .mg-services-offer__media { padding: 34px 22px 30px; } .mg-services-offer .mg-price-row { gap: 6px 12px; padding: 14px 0; } .mg-services-offer .mg-checklist { grid-template-columns: minmax(0, 1fr); gap: 11px; margin-top: 0; } .mg-services-offer .mg-checklist li { grid-template-columns: 22px minmax(0, 1fr); font-size: 16px; } .mg-services-offer .mg-checklist li::before { width: 19px; height: 19px; margin-top: 2px; } .mg-services-addons .mg-folder { gap: 16px; padding: 28px 22px 22px; border-radius: 0 12px 12px 12px; } .mg-services-addons .mg-folder__tab { top: -34px; height: 36px; padding: 0 16px; font-size: 12px; border-radius: 10px 10px 0 0; } .mg-services-addons .mg-link { padding: 12px 0; } .mg-services-addons__shot { order: 1; margin-top: 4px; } .mg-services-addons .mg-folder > .mg-link { order: 2; } .mg-services-included { padding-top: 22px; } .mg-services-included .mg-receipt { padding: 30px 22px 40px; font-size: 15px; } .mg-services-included .mg-receipt__head { gap: 8px; padding-bottom: 18px; } .mg-services-included .mg-receipt__rows { gap: 10px; padding: 18px 0; } .mg-services-included .mg-receipt__row, .mg-services-included .mg-receipt__total { gap: 8px; } .mg-services-included .mg-receipt__total { padding-top: 16px; } .mg-services-included .mg-receipt__leader { min-width: 16px; margin-bottom: 4px; } .mg-services-hero-note { display: none; } .mg-services-steps { grid-template-columns: minmax(0, 1fr); gap: 36px; } .mg-services-steps .mg-sticky { align-self: flex-start; max-width: 290px; margin-top: 10px; padding: 12px 14px 14px; } .mg-services-steps .mg-sticky__hand { display: inline; font-size: 25px; } .mg-services-timeline { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 8px; padding: 24px; border-radius: var(--mg-radius-l); } }  .mg-contact-hero { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px 56px; } .mg-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 72px; align-items: start; } .mg-contact-sheet { display: flex; flex-direction: column; gap: 48px; padding: 0 56px 56px; } .mg-contact-sheet__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin: 0 -56px; padding: 40px 56px 22px; border-bottom: var(--mg-rule-dashed); font: var(--mg-weight-regular) 13px/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-label); text-transform: uppercase; color: var(--mg-text-muted); } .mg-contact-sheet__head > * { white-space: nowrap; } .mg-contact-send-note { position: absolute; left: 260px; bottom: 72px; gap: 8px; transform: rotate(-4deg); } .mg-contact-aside { display: flex; flex-direction: column; align-items: stretch; gap: 60px; padding-top: 16px; } .mg-contact-next { position: relative; padding: 0 32px 18px; background: var(--mg-paper-card); border-radius: var(--mg-radius-xs); box-shadow: var(--mg-shadow-card); transform: rotate(1.2deg); } .mg-contact-next__head { display: flex; align-items: flex-end; height: 78px; margin: 0 -32px; padding: 0 32px 14px; box-sizing: border-box; border-bottom: var(--mg-rule-card-head); } .mg-contact-next__head h2 { margin: 0; font: var(--mg-weight-black) clamp(30px, 27.77px + 0.571vw, 36px)/1 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: -0.025em; } .mg-contact-next ol { margin: 0; padding: 0; list-style: none; } .mg-contact-next__row { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: baseline; padding: 20px 0 16px; border-bottom: 1px solid var(--mg-rule-blue-strong); font: var(--mg-weight-regular) 18px/1.45 var(--mg-font-sans); } .mg-contact-next__row:last-child { border-bottom: 0; } .mg-contact-next__num { font: var(--mg-weight-bold) 30px/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-numeral); } .mg-contact-email { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px 36px 30px; background: var(--mg-paper-card); border: var(--mg-rule); border-radius: var(--mg-radius-l); } .mg-contact-email a { padding: 4px 0; font: var(--mg-weight-black) clamp(26px, 23.77px + 0.571vw, 32px)/1.05 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: -0.02em; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; overflow-wrap: anywhere; } .mg-contact-quote { display: flex; flex-direction: column; gap: 18px; margin: 0 16px 0 24px; padding: 30px 30px 28px; background: var(--mg-highlighter); box-shadow: var(--mg-shadow-sticky); transform: rotate(-2deg); } .mg-contact-quote blockquote { margin: 0; padding: 0; border: 0; font: var(--mg-weight-medium) clamp(17px, 15.89px + 0.286vw, 20px)/1.45 var(--mg-font-sans); text-wrap: pretty; } .mg-contact-quote figcaption { display: flex; flex-direction: column; gap: 4px; } .mg-contact-quote .mg-sticky__hand { margin: 0; font-size: clamp(34px, 31.77px + 0.571vw, 40px); }  .mg-form { display: flex; flex-wrap: wrap; column-gap: 40px; row-gap: 36px; padding: 0; } .mg-form .form-group { display: flex; flex-direction: column; gap: 4px; width: 100%; margin: 0; padding: 0; } .mg-form .form-group:has(> input[name="name"]), .mg-form .form-group:has(> input[name="email"]) { width: calc(50% - 20px); } .mg-form .form-group:has(.options-wrapper), .mg-form .form-group:has(> input[name="launch_date"]), .mg-form .form-group:has(> textarea), .mg-form .submit-button-wrapper { margin-top: 12px; } .mg-form .form-group > label { font: var(--mg-weight-bold) 14px/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-label); text-transform: uppercase; color: var(--mg-ink); padding: 0; } .mg-form .form-group:has(> input[name="name"]) > label::after, .mg-form .form-group:has(> input[name="email"]) > label::after, .mg-form .form-group:has(> textarea) > label::after, .mg-form .form-group:has(input[name="needs[]"]) > .label::after { content: " *"; } .mg-form .form-group:has(> input[name="website"]) > label::after, .mg-form .form-group:has(> input[name="launch_date"]) > label::after { content: " (optional)"; font-weight: var(--mg-weight-regular); color: var(--mg-text-muted); } .mg-form .form-group > .label, .mg-form .form-group:has(> textarea) > label { font: var(--mg-weight-black) var(--mg-text-form-q)/1 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: -0.02em; text-transform: none; } .mg-form .form-group:has(> textarea) { gap: 18px; line-height: 42px; }  .mg-form .form-group:has(.options-wrapper) { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 12px; } .mg-form .form-group:has([type="radio"]) { row-gap: 20px; } .mg-form .form-group:has(input[name="needs[]"])::after { content: "Select all that apply"; order: 1; font: var(--mg-weight-regular) 13px/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-eyebrow); text-transform: uppercase; color: var(--mg-text-muted); } .mg-form .form-group:has(input[name="budget[]"])::after { content: "a rough guess is fine"; order: 1; transform: rotate(-3deg); font: var(--mg-weight-regular) clamp(25px, 23.89px + 0.286vw, 28px)/1 var(--mg-font-hand); color: var(--mg-pen); } .mg-form .form-group > .label { order: 0; } .mg-form .options-wrapper { order: 2; flex-basis: 100%; margin: 0; padding: 0; list-style: none; } .mg-form input[type="text"], .mg-form input[type="email"], .mg-form input[type="url"] { width: 100%; height: 52px; padding: 0 2px; border: 0; border-bottom: var(--mg-rule); border-radius: 0; background: transparent; font: var(--mg-weight-regular) var(--mg-text-mono-input)/1 var(--mg-font-mono); color: var(--mg-ink); box-sizing: border-box; outline: none; box-shadow: none; } .mg-form input[type="text"]:focus, .mg-form input[type="email"]:focus { border-bottom-color: var(--mg-pen); box-shadow: 0 1.5px 0 var(--mg-pen); } .mg-form ::placeholder { color: var(--mg-pencil); opacity: 1; } .mg-form .form-group:has(> input[name="launch_date"]) { max-width: 320px; } .mg-form input[name="launch_date"] { padding-right: 40px; background: url("/wp-content/uploads/marginalia/marks/calendar.svg") right 4px center / 24px no-repeat; } .mg-form textarea { width: 100%; min-height: 262px; padding: 10px 24px 0 72px; border: var(--mg-rule); border-radius: var(--mg-radius-s); background-color: var(--mg-paper-note); background-image: var(--mg-notebook); background-attachment: local; font: var(--mg-weight-regular) 19px/42px var(--mg-font-mono); color: var(--mg-ink); box-sizing: border-box; resize: vertical; outline: none; } .mg-form textarea:focus { border-color: var(--mg-pen); box-shadow: 0 0 0 1.5px var(--mg-pen); }  .mg-form .options-wrapper:has([type="checkbox"]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } .mg-form .options-wrapper li:has([type="checkbox"]) { display: flex; align-items: center; gap: 16px; min-height: 58px; border-bottom: 1px solid var(--mg-rule-blue-strong); } .mg-form [type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border: 0; background: var(--mg-icon-box) center / contain no-repeat; cursor: pointer; }  .mg-form .options-wrapper li:has([type="checkbox"]) { position: relative; } .mg-form .options-wrapper li:has([type="checkbox"])::after { content: ""; position: absolute; left: -2px; top: calc(50% - 25px); width: 34px; height: 34px; background: var(--mg-icon-tick) center / contain no-repeat; pointer-events: none; clip-path: inset(0 100% 0 0); } .mg-form .options-wrapper li:has([type="checkbox"]:checked)::after { clip-path: inset(0); transition: clip-path var(--mg-dur-tick) var(--mg-ease-pen); } @media (prefers-reduced-motion: reduce) { .mg-form .options-wrapper li:has([type="checkbox"]:checked)::after, .mg-check input:checked + .mg-check__box::after, .mg-cookie-prefs__row[aria-pressed="true"] .mg-cookie-prefs__box::after { transition: none; } } .mg-form [type="checkbox"]:focus-visible, .mg-form li:has([type="radio"]:focus-visible) label { outline: 2px solid var(--mg-focus); outline-offset: 3px; } .mg-form li:has([type="checkbox"]) label { flex: 1; padding: 0; font: var(--mg-weight-regular) 18px/1.3 var(--mg-font-sans); text-transform: none; letter-spacing: 0; cursor: pointer; } .mg-form li:has([type="checkbox"]):hover label { color: var(--mg-pen); }  .mg-form .options-wrapper:has([type="radio"]) { display: flex; flex-wrap: wrap; gap: 14px 16px; } .mg-form li:has([type="radio"]) { position: relative; } .mg-form [type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .mg-form li:has([type="radio"]) label { position: relative; display: inline-flex; align-items: center; height: 50px; padding: 0 24px; border: var(--mg-border-w) solid var(--mg-choice-border); border-radius: var(--mg-radius-pill); box-sizing: border-box; font: var(--mg-weight-medium) 17px/1 var(--mg-font-sans); text-transform: none; letter-spacing: 0; cursor: pointer; pointer-events: none; } .mg-form li:has([type="radio"]):hover label { color: var(--mg-pen); } .mg-form li:has([type="radio"]:checked) label { border-color: transparent; } .mg-form li:has([type="radio"]) label::after { content: ""; position: absolute; left: -9%; top: -22%; width: 118%; height: 144%; background: var(--mg-mark-ring) center / 100% 100% no-repeat; -webkit-mask: conic-gradient(from 250deg, #000 var(--mg-ring-sweep), transparent 0); mask: conic-gradient(from 250deg, #000 var(--mg-ring-sweep), transparent 0); pointer-events: none; } .mg-form li:has([type="radio"]:checked) label::after { --mg-ring-sweep: 360deg; animation: mg-ring-draw var(--mg-dur-ring) var(--mg-ease-pen) both; } @media (prefers-reduced-motion: reduce) { .mg-form li:has([type="radio"]:checked) label::after, .mg-choice:has(input:checked)::after, .mg-choice.is-selected::after { animation: none; } }  .mg-pen-js .mg-form li:has([type="radio"]) label::after, .mg-pen-js .mg-form .options-wrapper li:has([type="checkbox"])::after, .mg-pen-js .mg-choice::after, .mg-pen-js .mg-check__box::after, .mg-pen-js .mg-cookie-prefs__box::after { display: none; } .mg-pen-ring { position: absolute; left: -9%; top: -22%; width: 118%; height: 144%; overflow: visible; pointer-events: none; visibility: hidden; } .mg-pen-tick { position: absolute; left: -2px; top: -13px; width: 34px; height: 34px; overflow: visible; pointer-events: none; visibility: hidden; } .mg-form .options-wrapper li > .mg-pen-tick { top: calc(50% - 25px); } .mg-pen-ring path, .mg-pen-tick path { fill: none; stroke: var(--mg-pen); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 1.05; } .mg-pen-ring path { stroke-width: 3.4; } .mg-pen-tick path { stroke-width: 4; } .mg-form li:has([type="radio"]:checked) .mg-pen-ring, .mg-choice:has(input:checked) .mg-pen-ring, .mg-choice.is-selected .mg-pen-ring, .mg-form li:has([type="checkbox"]:checked) > .mg-pen-tick, .mg-check input:checked + .mg-check__box .mg-pen-tick, .mg-cookie-prefs__row[aria-pressed="true"] .mg-pen-tick { visibility: visible; } .mg-form li:has([type="radio"]:checked) .mg-pen-ring path, .mg-choice:has(input:checked) .mg-pen-ring path, .mg-choice.is-selected .mg-pen-ring path { animation: mg-pen-draw var(--mg-dur-ring) var(--mg-ease-pen) forwards; } .mg-form li:has([type="checkbox"]:checked) > .mg-pen-tick path, .mg-check input:checked + .mg-check__box .mg-pen-tick path, .mg-cookie-prefs__row[aria-pressed="true"] .mg-pen-tick path { animation: mg-pen-draw var(--mg-dur-tick) var(--mg-ease-pen) forwards; } @keyframes mg-pen-draw { to { stroke-dashoffset: 0; } } @media (max-width: 767px) { .mg-pen-ring path { stroke-width: 3; } } @media (prefers-reduced-motion: reduce) { .mg-pen-ring path, .mg-pen-tick path { animation: none !important; stroke-dashoffset: 0; } }  .mg-form .submit-button-wrapper { width: auto; } .mg-form .submit-button-wrapper .bricks-button { display: inline-flex; align-items: center; gap: 12px; height: 62px; padding: 0 40px; border: var(--mg-border-w) solid var(--mg-btn-bg); border-radius: var(--mg-radius-pill); background: var(--mg-btn-bg); color: var(--mg-paper); font: var(--mg-weight-semibold) 18px/1 var(--mg-font-sans); cursor: pointer; transition: background var(--mg-dur-hover), border-color var(--mg-dur-hover); } .mg-form .submit-button-wrapper .bricks-button:hover { background: var(--mg-btn-bg-hover); border-color: var(--mg-btn-bg-hover); } .mg-form .submit-button-wrapper .bricks-button:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 3px; }  .mg-form .form-group-error-message { display: none; order: 3; flex-basis: 100%; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 0; font: var(--mg-weight-regular) 14.5px/1.4 var(--mg-font-mono); color: var(--mg-error); } .mg-form .form-group-error-message.show { display: flex; } .mg-form .form-group-error-message::before { content: ""; flex: none; width: 20px; height: 9px; margin-top: 5px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10'%3E%3Cpath d='M1 6 C4 1 7 1 9 5 S14 9 17 5 S20 2 21 3' fill='none' stroke='%23B23A25' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; } .mg-form .form-group:has(.form-group-error-message.show) input { border-bottom-color: var(--mg-error); box-shadow: 0 1.5px 0 var(--mg-error); } .mg-form .form-group:has(.form-group-error-message.show) textarea { border-color: var(--mg-error); box-shadow: 0 0 0 1.5px var(--mg-error); } .mg-form .form-group:has(.form-group-error-message.show) [type="checkbox"]:not(:checked) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 3 C9 2.2 16 2.6 21.5 2.4 C21.9 9 21.4 15 21.8 21.6 C15 21.9 8 21.2 2.2 21.7 C2.6 15 2.1 9 2.5 3 Z' fill='none' stroke='%23B23A25' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); } .mg-form .form-group:has(> input[name="email"]:not(:placeholder-shown):valid) > input { padding-right: 36px; background: var(--mg-icon-tick) right 4px center / 26px no-repeat; } .mg-form .message { flex-basis: 100%; order: 99; margin: 0; padding: 20px 24px 22px; border: var(--mg-border-w) solid var(--mg-error); border-radius: var(--mg-radius-s); background: var(--mg-paper-note); font: var(--mg-weight-regular) 17px/1.5 var(--mg-font-sans); color: var(--mg-ink-soft); } .mg-form .message.success { border-color: var(--mg-pen); } .mg-form .bricks-button .loading svg { width: 20px; height: 20px; } @media (max-width: 991px) { .mg-contact-grid { grid-template-columns: minmax(0, 1fr); } .mg-contact-aside { max-width: 560px; } } @media (max-width: 767px) { .mg-contact-hero { flex-direction: column; align-items: flex-start; gap: 0; } .mg-contact-grid { gap: 72px; } .mg-contact-sheet { gap: 38px; margin: 0 -6px; padding: 0 20px 28px; border-radius: var(--mg-radius-l); } .mg-contact-sheet__head { flex-direction: column; gap: 8px; margin: 0 -20px; padding: 30px 20px 16px; font-size: 11.5px; line-height: 1.3; letter-spacing: var(--mg-ls-eyebrow); } .mg-contact-send-note { position: static; align-self: center; margin-top: -24px; transform: rotate(-3deg); font-size: 27px; } .mg-contact-aside { gap: 52px; padding-top: 0; } .mg-contact-next { padding: 0 22px 12px; transform: rotate(1deg); } .mg-contact-next__head { height: 64px; margin: 0 -22px; padding: 0 22px 12px; } .mg-contact-next__row { grid-template-columns: 46px minmax(0, 1fr); padding: 16px 0 13px; font-size: 16px; } .mg-contact-next__num { font-size: 25px; } .mg-contact-email { gap: 12px; padding: 22px 24px 24px; } .mg-contact-email a { padding: 6px 0; text-underline-offset: 5px; } .mg-contact-quote { gap: 14px; margin: 0 8px; padding: 24px 22px 22px; transform: rotate(-1.6deg); } .mg-form { row-gap: 38px; } .mg-form .form-group:has(> input[name="name"]), .mg-form .form-group:has(> input[name="email"]) { width: 100%; } .mg-form .form-group:has(.options-wrapper), .mg-form .form-group:has(> input[name="launch_date"]), .mg-form .form-group:has(> textarea), .mg-form .submit-button-wrapper { margin-top: 0; } .mg-form .form-group > label { font-size: 13px; } .mg-form .form-group:has(.options-wrapper) { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; row-gap: 8px; } .mg-form .options-wrapper { flex-basis: auto; align-self: stretch; } .mg-form .form-group:has(input[name="budget[]"]) .options-wrapper { flex-basis: 100%; } .mg-form .form-group:has([type="radio"]) { row-gap: 16px; } .mg-form .form-group:has(input[name="budget[]"]) { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 14px; } .mg-form input[type="text"], .mg-form input[type="email"] { height: 50px; } .mg-form .options-wrapper:has([type="checkbox"]) { display: flex; flex-direction: column; } .mg-form .options-wrapper:has([type="radio"]) { gap: 12px; } .mg-form .form-group:has(> textarea) { gap: 14px; line-height: 38px; } .mg-form textarea { min-height: 236px; padding: 8px 14px 0 46px; background-image: linear-gradient(90deg, transparent 32px, rgba(224, 127, 108, .9) 32px, rgba(224, 127, 108, .9) 33.5px, transparent 33.5px), repeating-linear-gradient(to bottom, transparent 0, transparent 37px, var(--mg-rule-blue) 37px, var(--mg-rule-blue) 38px); font-size: 17px; } .mg-form .submit-button-wrapper { width: 100%; } .mg-form .submit-button-wrapper .bricks-button { width: 100%; justify-content: center; height: 58px; font-size: 17px; } }  .mg-work-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 64px; align-items: end; } .mg-work-hero__title { margin: 18px 0 0; font: var(--mg-weight-black) clamp(120px, 82.86px + 9.524vw, 220px)/.82 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: -0.045em; } .mg-work-hero__title .mg-mark--underline .mg-mark__svg { bottom: -6px; height: 28px; } .mg-work-hero .mg-lead { margin: 0 0 14px; max-width: none; } .mg-work-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .mg-work-filter .mg-chip { text-decoration: none; } .mg-work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; row-gap: 88px; padding-top: 16px; } .mg-work-grid .mg-work-card { gap: 24px; } .mg-work-grid .mg-work-card__media { aspect-ratio: 3 / 2; background: var(--mg-card-bg, var(--mg-paper-shade)); }  .mg-work-grid .mg-work-card__media .mg-well { color: var(--mg-graphite); color: lch(from var(--mg-card-bg, #E9E3D6) calc((55 - l) * 1000) 0 0 / .7); } .mg-work-card__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; } .mg-work-grid .mg-work-card__name { font-size: clamp(22px, 19.77px + 0.571vw, 28px); } .mg-work-card__arrow { flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: var(--mg-rule); border-radius: 50%; box-sizing: border-box; font: var(--mg-weight-regular) 22px/1 var(--mg-font-sans); transition: background var(--mg-dur-hover), color var(--mg-dur-hover); } .mg-work-card:hover .mg-work-card__arrow { background: var(--mg-ink); color: var(--mg-paper); } .mg-work-grid .mg-work-card > .mg-tape { top: -14px; left: 44px; transform: rotate(-5deg); } .mg-work-grid .mg-work-card:nth-child(6n+2) > .mg-tape { left: auto; right: 48px; top: -13px; transform: rotate(4deg); } .mg-work-grid .mg-work-card:nth-child(6n+3) > .mg-tape { left: 50%; margin-left: -52px; transform: rotate(-2deg); } .mg-work-grid .mg-work-card:nth-child(6n+4) > .mg-tape { left: 52px; top: -13px; transform: rotate(3deg); } .mg-work-grid .mg-work-card:nth-child(6n+5) > .mg-tape { left: auto; right: 56px; transform: rotate(-4deg); } .mg-work-grid .mg-work-card:nth-child(6n) > .mg-tape { left: 48px; top: -13px; transform: rotate(-6deg); } @media (max-width: 991px) { .mg-work-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; } .mg-work-grid { column-gap: 32px; row-gap: 64px; } } @media (max-width: 767px) { .mg-work-hero { gap: 0; } .mg-work-hero__title { margin-top: 14px; line-height: .84; } .mg-work-hero__title .mg-mark--underline .mg-mark__svg { bottom: -4px; height: 18px; } .mg-work-hero .mg-lead { margin: 30px 0 0; } .mg-work-filter { flex-wrap: nowrap; gap: 8px; width: auto; max-width: none; margin-inline: calc(var(--mg-gutter) * -1); padding: 2px var(--mg-gutter); overflow-x: auto; white-space: nowrap; scrollbar-width: none; } .mg-work-filter::-webkit-scrollbar { display: none; } .mg-work-filter .mg-chip { flex: none; height: 44px; padding: 0 18px; } .mg-work-grid { grid-template-columns: minmax(0, 1fr); row-gap: 52px; padding-top: 0; } .mg-work-grid .mg-work-card { gap: 18px; } .mg-work-card__arrow { display: none; } .mg-work-grid .mg-work-card > .mg-tape { width: 84px; height: 24px; top: -12px; left: 24px; } .mg-work-grid .mg-work-card:nth-child(6n+2) > .mg-tape { left: auto; right: 28px; top: -11px; } .mg-work-grid .mg-work-card:nth-child(6n+3) > .mg-tape { left: 50%; margin-left: -42px; } .mg-work-grid .mg-work-card:nth-child(6n+4) > .mg-tape { left: 28px; } .mg-work-grid .mg-work-card:nth-child(6n+5) > .mg-tape { left: auto; right: 30px; } .mg-work-grid .mg-work-card:nth-child(6n) > .mg-tape { left: 26px; } }  .mg-case-back { display: inline-flex; align-items: center; gap: 10px; padding: 10px 0; font: var(--mg-weight-regular) 14px/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-eyebrow); text-transform: uppercase; color: var(--mg-ink); text-decoration: none; } .mg-case-back:hover { color: var(--mg-pen); } .mg-case-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-top: 24px; } .mg-case-head .mg-eyebrow { flex: none; margin-bottom: 16px; } .mg-case-title { margin: 0; font: var(--mg-weight-black) clamp(64px, 28.34px + 9.143vw, 160px)/.86 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: -0.045em; } .mg-case-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 48px; background: var(--mg-paper-card); border: var(--mg-rule); border-radius: 10px; } .mg-case-meta__item { display: flex; flex-direction: column; gap: 12px; padding: 22px 28px 24px; } .mg-case-meta__item + .mg-case-meta__item { border-left: var(--mg-rule-dashed); } .mg-case-meta__label { font: var(--mg-weight-regular) 12px/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-label); text-transform: uppercase; color: var(--mg-text-muted); } .mg-case-meta__value { font: var(--mg-weight-medium) 19px/1.35 var(--mg-font-sans); color: var(--mg-ink); } a.mg-case-meta__value { align-self: flex-start; font-weight: var(--mg-weight-semibold); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; } a.mg-case-meta__value:hover { color: var(--mg-pen); } .mg-case-hero { position: relative; height: 800px; background: var(--mg-band, var(--mg-ink)); border: var(--mg-rule); border-radius: var(--mg-radius-s); overflow: hidden; } .mg-case-hero .mg-browser { position: absolute; left: 7.5%; top: 76px; width: 67.5%; transform: rotate(-1.5deg); box-shadow: 0 22px 34px -20px rgba(0, 0, 0, .6); } .mg-case-hero .mg-phone { position: absolute; z-index: 3; left: 72.6%; top: 140px; width: 22.3%; height: auto; aspect-ratio: 1 / 2; padding: 13px; border-radius: 52px; transform: rotate(4deg); } .mg-case-hero .mg-phone__screen { border-radius: 40px; } .mg-case-hero > .mg-tape { z-index: 4; width: 150px; height: 38px; } .mg-case-hero .mg-browser__screen { aspect-ratio: 429 / 291; } .mg-case-approach__media img { width: 100%; height: 100%; object-fit: cover; } .mg-case-quote-eyebrow { margin-bottom: 72px; color: inherit; } .mg-case-split { display: grid; grid-template-columns: 480px minmax(0, 1fr); gap: 80px; align-items: start; padding-top: 28px; border-top: var(--mg-rule); } .mg-case-split .mg-section-head__title { margin: 0; } .mg-case-brief { max-width: 740px; margin: 8px 0 0; font: var(--mg-weight-regular) clamp(19px, 16.4px + 0.667vw, 26px)/1.55 var(--mg-font-sans); color: var(--mg-ink-soft); text-wrap: pretty; } .mg-case-brief p { margin: 0; } .mg-case-figs { display: flex; flex-direction: column; align-items: stretch; gap: 112px; } .mg-case-fig { position: relative; display: flex; flex-direction: column; gap: 20px; margin: 0; } .mg-case-fig__frame { position: relative; } .mg-case-fig .mg-browser { box-shadow: var(--mg-shadow-frame); } .mg-case-fig .mg-caption { font-size: 14px; } .mg-case-screens { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: flex-start; gap: 72px; padding: 112px var(--mg-gutter) 120px; background: var(--mg-band, var(--mg-ink)); } .mg-case-screens figure { display: flex; flex-direction: column; align-items: center; gap: 26px; margin: 0; } .mg-case-screens figure:nth-child(2) { margin-top: 48px; } .mg-case-screens figcaption { font: var(--mg-weight-regular) 13px/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-eyebrow); text-transform: uppercase; color: var(--mg-paper); } .mg-case-approach { display: flex; flex-direction: column; gap: 26px; } .mg-case-approach__media { position: relative; aspect-ratio: 4 / 3; background: var(--mg-band, var(--mg-paper-shade)); border: var(--mg-rule); border-radius: 6px; overflow: hidden; } .mg-case-approach__media .mg-well { color: var(--mg-paper); opacity: .75; } .mg-case-approach__text { display: flex; flex-direction: column; gap: 10px; } .mg-case-approach__text p { margin: 0; font: var(--mg-weight-regular) 17px/1.55 var(--mg-font-sans); color: var(--mg-text-muted); text-wrap: pretty; }  .mg-case-outcome { display: grid; grid-template-columns: 36px minmax(0, 280px) minmax(0, 1fr); column-gap: 24px; border-bottom: var(--mg-rule); } .mg-case-outcome h3 { grid-column: 1 / 3; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 24px; margin: 0; padding: 28px 0; border-top: var(--mg-rule); font: var(--mg-weight-bold) 23px/1.25 var(--mg-font-sans); letter-spacing: var(--mg-ls-title); } .mg-case-outcome h3::before { content: ""; width: 30px; height: 30px; margin-top: -2px; background: var(--mg-icon-tick) center / contain no-repeat; } .mg-case-outcome p { grid-column: 3; margin: 0; padding: 28px 0; border-top: var(--mg-rule); font: var(--mg-weight-regular) 18px/1.55 var(--mg-font-sans); color: var(--mg-text-muted); text-wrap: pretty; } .mg-case-quote { max-width: 900px; margin: 0 auto; padding-inline: 48px; } .mg-case-quote .mg-index-card__head { height: 76px; margin-inline: -48px; padding-inline: 48px; } .mg-case-quote .mg-index-card__lines { margin-inline: -48px; padding-inline: 48px; background-image: repeating-linear-gradient(to bottom, transparent 0 35px, var(--mg-rule-blue) 35px 36px, transparent 36px 46px); } .mg-case-quote .mg-index-card__quote { padding: 0; border: 0; font-size: 30px; line-height: 46px; letter-spacing: -0.01em; } .mg-case-quote .mg-index-card__sig { margin-top: 46px; font-size: 50px; line-height: 46px; } .mg-case-quote .mg-index-card__role { font-size: 14px; line-height: 46px; } .mg-case-next { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; padding-top: 28px; border-top: var(--mg-rule); color: var(--mg-ink); text-decoration: none; } .mg-case-next:hover { color: var(--mg-pen); } .mg-case-next__media { position: relative; margin-top: 28px; } .mg-case-next__media .mg-work-card__media { aspect-ratio: 3 / 2; background: var(--mg-card-bg, var(--mg-paper-shade)); } .mg-case-next__media .mg-well { color: lch(from var(--mg-card-bg, #E9E3D6) calc((55 - l) * 1000) 0 0 / .7); } .mg-case-next__media > .mg-tape { top: -14px; left: 56px; width: 110px; height: 30px; transform: rotate(-5deg); } .mg-case-next__text { display: flex; flex-direction: column; gap: 18px; } .mg-case-next__title { font: var(--mg-weight-black) clamp(40px, 22.17px + 4.571vw, 88px)/.9 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: -0.035em; } @media (max-width: 991px) { .mg-case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mg-case-meta__item:nth-child(3) { border-left: 0; } .mg-case-meta__item:nth-child(n+3) { border-top: var(--mg-rule-dashed); } .mg-case-hero { height: 560px; } .mg-case-split { grid-template-columns: minmax(0, 1fr); gap: 24px; } .mg-case-screens { gap: 32px; } .mg-case-screens .mg-phone { width: 200px; height: 416px; } } @media (max-width: 767px) { .mg-case-back { font-size: 12px; } .mg-case-head { flex-direction: column-reverse; align-items: flex-start; gap: 12px; margin-top: 14px; } .mg-case-head .mg-eyebrow { margin-bottom: 0; font-size: 12px; } .mg-case-title { line-height: .88; letter-spacing: -0.04em; } .mg-case-meta { margin-top: 28px; } .mg-case-meta__item { gap: 8px; padding: 16px 16px 18px; } .mg-case-meta__label { font-size: 11px; } .mg-case-meta__value { font-size: 16px; } a.mg-case-meta__value { padding: 4px 0; } .mg-case-hero { height: 300px; } .mg-case-hero .mg-browser { left: 5%; top: 30px; width: 78%; } .mg-case-hero .mg-phone { left: 66%; top: 70px; width: 30%; padding: 6px; border-radius: 24px; } .mg-case-hero .mg-phone__screen { border-radius: 18px; } .mg-case-hero > .mg-tape { width: 84px; height: 24px; } .mg-case-split { gap: 24px; padding-top: 22px; } .mg-case-figs { gap: 52px; } .mg-case-fig { gap: 14px; } .mg-case-fig .mg-caption { font-size: 12px; } .mg-case-screens { justify-content: flex-start; gap: 18px; padding: 60px var(--mg-gutter) 56px; overflow-x: auto; scrollbar-width: none; } .mg-case-screens figure { flex: none; gap: 16px; } .mg-case-screens figure:nth-child(2) { margin-top: 0; } .mg-case-screens figcaption { font-size: 11px; } .mg-case-screens .mg-phone { width: 176px; height: 366px; padding: 8px; border-radius: 30px; } .mg-case-screens .mg-phone__screen { border-radius: 23px; } .mg-case-approach { gap: 20px; } .mg-case-approach__text { gap: 8px; } .mg-case-approach__text p { font-size: 16px; } .mg-case-outcome { grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; } .mg-case-outcome h3 { grid-column: 1 / -1; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; padding: 22px 0 8px; font-size: 20px; } .mg-case-outcome h3::before { width: 26px; height: 26px; } .mg-case-outcome p { grid-column: 2; padding: 0 0 22px; border-top: 0; font-size: 16px; } .mg-case-quote-eyebrow { margin-bottom: 40px; } .mg-case-quote { padding-inline: 24px; } .mg-case-quote .mg-index-card__head { height: 56px; margin-inline: -24px; padding-inline: 24px; } .mg-case-quote .mg-index-card__lines { margin-inline: -24px; padding-inline: 24px; background-image: var(--mg-ruled-32); } .mg-case-quote .mg-index-card__quote { font-size: 20px; line-height: 32px; } .mg-case-quote .mg-index-card__sig { margin-top: 32px; font-size: 36px; line-height: 32px; } .mg-case-quote .mg-index-card__role { font-size: 11.5px; line-height: 32px; } .mg-case-next { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 22px; } .mg-case-next__media { order: 2; margin-top: 10px; } .mg-case-next__media > .mg-tape { left: 24px; width: 84px; height: 24px; } .mg-case-next__text { display: contents; } .mg-case-next__text > :first-child { order: 1; } .mg-case-next__text > :not(:first-child) { order: 3; } }  .mg-404-hero { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 56px; align-items: center; } .mg-404-title { margin: 0; font: var(--mg-weight-black) clamp(56px, 38.17px + 4.571vw, 104px)/.9 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: -0.04em; } .mg-404-art { position: relative; height: 620px; } .mg-404-art__blob { position: absolute; left: 48px; top: 30px; width: 430px; height: 520px; background: var(--mg-highlighter); border-radius: 56% 44% 52% 48% / 44% 50% 50% 56%; transform: rotate(-8deg); } .mg-404-sheet { position: absolute; left: 44px; top: 40px; width: 420px; height: 530px; transform: rotate(3deg); filter: drop-shadow(0 22px 20px rgba(23, 22, 20, .24)); } .mg-404-sheet__page { height: 100%; display: flex; flex-direction: column; padding: 30px 36px 30px 46px; box-sizing: border-box; background: var(--mg-paper-card); clip-path: var(--mg-tape-clip); } .mg-404-sheet__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--mg-rule-hair); font: var(--mg-weight-regular) 11px/1 var(--mg-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mg-text-muted); } .mg-404-sheet__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; } .mg-404-sheet__num { position: relative; display: inline-block; margin: 0; padding: 0 10px; font: var(--mg-weight-bold) 156px/1 var(--mg-font-mono); letter-spacing: -0.06em; color: var(--mg-ink); } .mg-404-sheet__num .mg-mark__svg { left: -6%; top: -8%; width: 112%; height: 116%; } .mg-404-sheet__foot { display: flex; justify-content: center; padding-top: 12px; border-top: 1px solid var(--mg-rule-hair); font: var(--mg-weight-regular) 13px/1 var(--mg-font-mono); letter-spacing: .1em; color: var(--mg-text-muted); } .mg-404-split { display: grid; grid-template-columns: 480px minmax(0, 1fr); gap: 80px; align-items: start; padding-top: 28px; border-top: var(--mg-rule); } .mg-404-index { margin-top: 12px; padding: 0 44px 18px; transform: rotate(-1deg); } .mg-404-index .mg-index-card__head { justify-content: space-between; } .mg-404-row { display: grid; grid-template-columns: auto minmax(24px, 1fr) auto; column-gap: 16px; align-items: end; padding: 24px 0 18px; border-bottom: 1px solid var(--mg-rule-blue-strong); color: var(--mg-ink); text-decoration: none; } .mg-404-row:last-child { border-bottom: 0; } .mg-404-row:hover { color: var(--mg-pen); } .mg-404-row__name { font: var(--mg-weight-black) 40px/1 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: -0.025em; } .mg-404-row__leader { margin-bottom: 7px; border-bottom: 2px dotted var(--mg-pencil); } .mg-404-row__num { font: var(--mg-weight-bold) 17px/1 var(--mg-font-mono); letter-spacing: .04em; } .mg-404-row__desc { grid-column: 1 / -1; margin-top: 10px; font: var(--mg-weight-regular) 17px/1.45 var(--mg-font-sans); color: var(--mg-text-muted); } @media (max-width: 991px) { .mg-404-hero, .mg-404-split { grid-template-columns: minmax(0, 1fr); gap: 36px; } } @media (max-width: 767px) { .mg-404-hero { gap: 0; } .mg-404-art { height: 420px; margin-top: 40px; } .mg-404-art__blob { left: 46px; top: 14px; width: 290px; height: 370px; } .mg-404-sheet { left: 40px; top: 24px; width: 290px; height: 370px; filter: drop-shadow(0 18px 16px rgba(23, 22, 20, .24)); } .mg-404-sheet__page { padding: 22px 24px 20px 32px; } .mg-404-sheet__head { font-size: 9.5px; } .mg-404-sheet__num { font-size: 104px; } .mg-404-sheet__foot { font-size: 11px; } .mg-404-split { padding-top: 22px; } .mg-404-index { padding: 0 22px 8px; transform: rotate(-.8deg); } .mg-404-row { column-gap: 10px; padding: 18px 0 14px; } .mg-404-row__name { font-size: 30px; } .mg-404-row__num { font-size: 14px; } .mg-404-row__desc { font-size: 15px; } }  .mg-privacy-hero { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 72px; align-items: center; } .mg-privacy-hero__title { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 20px 40px; } .mg-privacy-title { width: min-content; margin: 0; font: var(--mg-weight-black) clamp(68px, 48.69px + 4.952vw, 120px)/.88 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: -0.04em; } .mg-privacy-hero .mg-lead { margin: 44px 0 0; max-width: 620px; } .mg-privacy-short { padding: 0 36px 22px; transform: rotate(1.4deg); } .mg-privacy-short .mg-index-card__head { height: 72px; margin: 0 -36px; padding: 0 36px 12px; } .mg-privacy-short ul { margin: 0 -36px; padding: 4px 36px 0; list-style: none; background-image: repeating-linear-gradient(to bottom, transparent 0 37px, var(--mg-rule-blue) 37px 38px); background-position: 0 4px; } .mg-privacy-short li, .mg-privacy-rights li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; } .mg-privacy-short li { font: var(--mg-weight-semibold) 19px/38px var(--mg-font-sans); letter-spacing: -0.005em; } .mg-privacy-short li::before, .mg-privacy-rights li::before { content: ""; width: 26px; height: 26px; margin-top: 6px; background: var(--mg-icon-tick) center / contain no-repeat; } .mg-privacy-tabs { display: flex; flex-direction: row; align-items: flex-end; gap: 6px; padding-left: 24px; } .mg-privacy-tab { height: 40px; padding: 0 22px; display: flex; align-items: center; background: var(--mg-blush); border: var(--mg-rule); border-bottom: 0; border-radius: 12px 12px 0 0; box-sizing: border-box; font: var(--mg-weight-regular) 14px/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-label); text-transform: uppercase; color: var(--mg-ink); text-decoration: none; } .mg-privacy-tab[aria-current="page"] { position: relative; z-index: 2; height: 48px; margin-bottom: -1.5px; padding: 0 24px; background: var(--mg-paper-card); font-weight: var(--mg-weight-bold); } .mg-privacy-doc { padding: 0 56px 64px; background: var(--mg-paper-card); border: var(--mg-rule); border-radius: 18px; } .mg-privacy-doc__head { align-self: stretch; width: auto; max-width: none; margin: 0 -56px; padding: 30px 56px 22px; display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 24px; border-bottom: var(--mg-rule-dashed); font: var(--mg-weight-regular) 13px/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-label); text-transform: uppercase; color: var(--mg-text-muted); } .mg-privacy-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 80px; align-items: start; padding-top: 48px; } .mg-privacy-toc { position: sticky; top: 32px; display: flex; flex-direction: column; gap: 28px; } .mg-privacy-toc ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; } .mg-privacy-toc a { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--mg-rule-blue-strong); font: var(--mg-weight-regular) 17px/1.3 var(--mg-font-sans); color: var(--mg-ink); text-decoration: none; } .mg-privacy-toc a:hover { color: var(--mg-pen); } .mg-privacy-toc a span { font: var(--mg-weight-bold) 13px/1 var(--mg-font-mono); letter-spacing: .04em; } .mg-privacy-section { padding: 36px 0 52px; border-top: var(--mg-rule); scroll-margin-top: 24px; } .mg-privacy-section:first-child { padding-top: 0; border-top: 0; } .mg-privacy-section__head { display: flex; flex-direction: row; align-items: baseline; gap: 18px; margin-bottom: 24px; } .mg-privacy-section__num { flex: none; font: var(--mg-weight-bold) 16px/1 var(--mg-font-mono); letter-spacing: .02em; color: var(--mg-pen); } .mg-privacy-section__head h2 { margin: 0; font: var(--mg-weight-black) clamp(32px, 27.54px + 1.143vw, 44px)/.95 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: -0.03em; } .mg-privacy-section__body { display: flex; flex-direction: column; gap: 20px; max-width: 700px; font: var(--mg-weight-regular) 18px/1.65 var(--mg-font-sans); color: var(--mg-ink-soft); } .mg-privacy-section__body p { margin: 0; text-wrap: pretty; } .mg-privacy-table { display: flex; flex-direction: column; margin: 6px 0; } .mg-privacy-table__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) minmax(0, .8fr); gap: 20px; align-items: baseline; padding: 16px 0; border-bottom: 2px dotted var(--mg-pencil); font: var(--mg-weight-regular) 17px/1.45 var(--mg-font-sans); color: var(--mg-text-muted); } .mg-privacy-table__row > :first-child { font-weight: var(--mg-weight-semibold); color: var(--mg-ink); } .mg-privacy-table__row > :last-child { font: var(--mg-weight-regular) 15px/1.4 var(--mg-font-mono); color: var(--mg-ink); } .mg-privacy-table__row--head { padding: 0 0 12px; border-bottom: var(--mg-rule-dashed); } .mg-privacy-table__row--head > * { font: var(--mg-weight-bold) 12px/1 var(--mg-font-mono) !important; letter-spacing: var(--mg-ls-label); text-transform: uppercase; color: var(--mg-ink) !important; } .mg-privacy-processors { display: flex; flex-direction: column; gap: 14px; margin: 4px 0; } .mg-privacy-processors div { display: flex; flex-direction: row; align-items: flex-end; gap: 12px; font: var(--mg-weight-regular) 17px/1.4 var(--mg-font-sans); color: var(--mg-ink); } .mg-privacy-processors div > :first-child { font-weight: var(--mg-weight-semibold); } .mg-privacy-processors div::after { content: ""; order: 1; flex: 1; min-width: 24px; margin-bottom: 6px; border-bottom: 2px dotted var(--mg-pencil); } .mg-privacy-processors div > :last-child { order: 2; font: var(--mg-weight-regular) 15px/1.4 var(--mg-font-mono); text-align: right; } .mg-privacy-rights { margin: 4px 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; font: var(--mg-weight-regular) 17px/1.45 var(--mg-font-sans); color: var(--mg-ink); } .mg-privacy-rights li { grid-template-columns: 26px minmax(0, 1fr); } .mg-privacy-rights li::before { width: 22px; height: 22px; margin-top: 1px; } .mg-privacy-sign { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 8px; padding-top: 36px; border-top: var(--mg-rule-dashed); } .mg-privacy-sign__name { position: relative; display: inline-block; margin-top: 6px; transform: rotate(-3deg); font: var(--mg-weight-regular) clamp(46px, 42.29px + 0.952vw, 56px)/1 var(--mg-font-hand); color: var(--mg-pen); } .mg-privacy-sign .mg-caption:last-child { margin-top: 14px; } .mg-privacy-ticket { width: 100%; max-width: 880px; margin: 0 auto; } .mg-privacy-ticket .mg-ticket__part { padding: 34px 44px; gap: 16px; align-items: flex-start; } .mg-privacy-ticket .mg-ticket__part p { margin: 0; font: var(--mg-weight-regular) 18px/1.5 var(--mg-font-sans); color: var(--mg-text-muted); } .mg-privacy-ticket .mg-ticket__part:last-child { justify-content: center; } .mg-privacy-ticket .mg-ticket__part:last-child a { padding: 4px 0; font: var(--mg-weight-black) clamp(26px, 23.03px + 0.762vw, 34px)/1.05 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: -0.02em; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; overflow-wrap: anywhere; } @media (max-width: 991px) { .mg-privacy-hero { grid-template-columns: minmax(0, 1fr); gap: 48px; } .mg-privacy-layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; } .mg-privacy-toc { position: static; gap: 14px; padding: 26px 0 30px; border-bottom: var(--mg-rule); margin-bottom: 30px; } } @media (max-width: 767px) { .mg-privacy-hero .mg-lead { margin-top: 28px; } .mg-privacy-short { padding: 0 22px 14px; transform: rotate(1deg); } .mg-privacy-short .mg-index-card__head { height: 56px; margin: 0 -22px; padding: 0 22px 10px; } .mg-privacy-short ul { margin: 0 -22px; padding: 4px 22px 0; } .mg-privacy-short li { font-size: 16px; line-height: 38px; } .mg-privacy-tabs { gap: 4px; padding-left: 12px; overflow-x: auto; scrollbar-width: none; } .mg-privacy-tab { flex: none; height: 36px; padding: 0 14px; font-size: 12px; } .mg-privacy-tab[aria-current="page"] { height: 42px; padding: 0 16px; } .mg-privacy-doc { padding: 0 20px 32px; border-radius: 14px; } .mg-privacy-doc__head { flex-direction: column; gap: 8px; margin: 0 -20px; padding: 22px 20px 16px; font-size: 11px; line-height: 1.3; } .mg-privacy-toc a { padding: 9px 0; font-size: 16px; } .mg-privacy-section { padding: 28px 0 36px; } .mg-privacy-section__head { gap: 12px; margin-bottom: 18px; } .mg-privacy-section__body { gap: 16px; font-size: 16px; } .mg-privacy-table__row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 0; font-size: 16px; } .mg-privacy-table__row--head { display: none; } .mg-privacy-processors div { flex-wrap: wrap; } .mg-privacy-processors div::after { display: none; } .mg-privacy-processors div > :last-child { flex-basis: 100%; text-align: left; } .mg-privacy-rights { grid-template-columns: minmax(0, 1fr); gap: 12px; font-size: 16px; } .mg-privacy-ticket { grid-template-columns: minmax(0, 1fr); } .mg-privacy-ticket .mg-ticket__part { padding: 24px; } .mg-privacy-ticket .mg-ticket__part + .mg-ticket__part { border-left: 0; border-top: var(--mg-rule-dashed); } .mg-privacy-ticket .mg-ticket__notch { display: block; left: auto; } .mg-privacy-ticket .mg-ticket__notch--top { top: -16px; left: -1.5px; width: 16px; height: 30px; border: var(--mg-rule); border-left: 0; border-radius: 0 15px 15px 0; } .mg-privacy-ticket .mg-ticket__notch--bottom { top: -16px; bottom: auto; right: -1.5px; width: 16px; height: 30px; border: var(--mg-rule); border-right: 0; border-radius: 15px 0 0 15px; } }  :root { --mg-measure-article: 680px;  --mg-text-blog-title: clamp(124px, 88.34px + 9.143vw, 220px);  --mg-text-cat-title: clamp(64px, 38.74px + 6.476vw, 132px);  --mg-text-post-title: clamp(52px, 32.69px + 4.952vw, 104px);  --mg-text-feature-title: clamp(42px, 32.34px + 2.476vw, 68px);  --mg-text-post-card-title: clamp(23px, 21.89px + 0.286vw, 26px); --mg-text-article: clamp(18px, 17.26px + 0.190vw, 20px);  --mg-text-article-lede: clamp(21px, 19.51px + 0.381vw, 25px);  --mg-text-article-h2: clamp(38px, 32.80px + 1.333vw, 52px); --mg-text-article-h3: clamp(23px, 21.51px + 0.381vw, 27px); --mg-text-pullquote: clamp(36px, 29.31px + 1.714vw, 54px); --mg-article-flow: clamp(26px, 23.77px + 0.571vw, 32px);  --mg-icon-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 10'%3E%3Cpath d='M2 6 C8 3 16 7 26 4' fill='none' stroke='%232B45D8' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }  .mg-blog-hero { padding-top: 44px; } .mg-blog-hero__row { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 64px; align-items: end; } .mg-blog-hero__row .mg-lead { margin: 0 0 14px; } .mg-blog-title { margin: 0; font: var(--mg-weight-black) var(--mg-text-blog-title)/.82 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: -0.045em; } .mg-blog-title--cat { font-size: var(--mg-text-cat-title); line-height: .86; letter-spacing: var(--mg-ls-mega); } .mg-breadcrumb { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; padding: 6px 0; font: var(--mg-weight-regular) var(--mg-text-mono-lg)/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-eyebrow); text-transform: uppercase; color: var(--mg-text-muted); text-decoration: none; } .mg-breadcrumb:hover { color: var(--mg-pen); }  .mg-blog-filter { margin-top: 64px; padding-top: 24px; border-top: var(--mg-rule); display: flex; align-items: center; gap: 24px; } .mg-blog-filter__list { display: flex; gap: 10px; } .mg-chip[aria-current="page"] { background: var(--mg-ink); color: var(--mg-paper); font-weight: var(--mg-weight-semibold); }  .mg-post-feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: center; color: var(--mg-ink); text-decoration: none; } .mg-post-feature:hover { color: var(--mg-ink); } .mg-post-feature__media { position: relative; aspect-ratio: 3 / 2; background: var(--mg-highlighter); border: var(--mg-rule); border-radius: var(--mg-radius-s); overflow: hidden; } .mg-post-feature__media img, .mg-post-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mg-post-feature__body { display: flex; flex-direction: column; gap: 22px; } .mg-post-feature__kicker { display: flex; align-items: center; gap: 12px; font: var(--mg-weight-bold) 13px/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-label); text-transform: uppercase; color: var(--mg-pen); } .mg-post-feature__badge { padding: 6px 10px; background: var(--mg-ink); color: var(--mg-paper); letter-spacing: .12em; } .mg-post-feature__title { margin: 0; font: var(--mg-weight-black) var(--mg-text-feature-title)/.94 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: -0.03em; text-wrap: balance; } .mg-post-feature__excerpt { margin: 0; font: var(--mg-weight-regular) clamp(17px, 16.26px + 0.190vw, 19px)/var(--mg-lh-body) var(--mg-font-sans); color: var(--mg-text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; } .mg-post-feature__meta, .mg-post-card__meta { font: var(--mg-weight-regular) var(--mg-text-mono)/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-mono); text-transform: uppercase; color: var(--mg-text-muted); } .mg-post-feature__meta { font-size: clamp(13px, 12.63px + 0.095vw, 14px); } .mg-post-feature:hover .mg-link { color: var(--mg-pen); }  .mg-blog-grid-title { font-size: clamp(36px, 30.06px + 1.524vw, 52px); } .mg-post-grid { row-gap: clamp(56px, 47.09px + 2.286vw, 80px); } .mg-post-card { position: relative; display: flex; flex-direction: column; gap: 22px; color: var(--mg-ink); text-decoration: none; transition: transform var(--mg-dur-lift) var(--mg-ease-out); } .mg-post-card:hover { color: var(--mg-ink); transform: var(--mg-lift); } .mg-post-card:focus-visible, .mg-post-feature:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 8px; border-radius: 8px; } .mg-post-card__tape { position: absolute; z-index: 2; top: -13px; left: 30px; width: 92px; height: 26px; background: var(--mg-tape); clip-path: var(--mg-tape-clip); transform: rotate(-5deg); pointer-events: none; } .mg-post-grid > :nth-child(6n+2) .mg-post-card__tape { left: auto; right: 34px; transform: rotate(4deg); } .mg-post-grid > :nth-child(6n+3) .mg-post-card__tape { left: 50%; margin-left: -46px; transform: rotate(-2deg); } .mg-post-grid > :nth-child(6n+4) .mg-post-card__tape { left: 40px; transform: rotate(3deg); } .mg-post-grid > :nth-child(6n+5) .mg-post-card__tape { left: auto; right: 28px; transform: rotate(-4deg); } .mg-post-grid > :nth-child(6n+6) .mg-post-card__tape { left: 64px; transform: rotate(5deg); } .mg-post-card__media { position: relative; aspect-ratio: 3 / 2; background: var(--mg-paper-shade); border: var(--mg-rule); border-radius: var(--mg-radius-s); overflow: hidden; } .mg-post-card__body { display: flex; flex-direction: column; gap: 12px; } .mg-post-card__cat { font: var(--mg-weight-bold) var(--mg-text-mono)/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-label); text-transform: uppercase; color: var(--mg-pen); } .mg-post-card__title { margin: 0; font: var(--mg-weight-bold) var(--mg-text-post-card-title)/1.12 var(--mg-font-sans); letter-spacing: -0.012em; text-wrap: balance; } .mg-post-card__excerpt { margin: 0; font: var(--mg-weight-regular) var(--mg-text-body)/var(--mg-lh-body) var(--mg-font-sans); color: var(--mg-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mg-post-card__meta { margin-top: 2px; }  .mg-pagination { padding-top: 28px; border-top: var(--mg-rule); } .mg-pagination ul.page-numbers { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 0; list-style: none; } .mg-pagination li:has(.prev) { margin-right: auto; } .mg-pagination li:has(.next) { margin-left: auto; } .mg-pagination .page-numbers:is(a, span) { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: var(--mg-rule); font: var(--mg-weight-regular) 17px/1 var(--mg-font-mono); color: var(--mg-ink); text-decoration: none; box-sizing: border-box; transition: background var(--mg-dur-hover); } .mg-pagination a.page-numbers:hover { background: var(--mg-highlighter); color: var(--mg-ink); } .mg-pagination .page-numbers.current { background: var(--mg-ink); color: var(--mg-paper); font-weight: var(--mg-weight-bold); } .mg-pagination .page-numbers.dots { width: 32px; border: 0; color: var(--mg-text-muted); } .mg-pagination .page-numbers:is(.prev, .next) { width: auto; padding: 0 26px; border-radius: var(--mg-radius-pill); font: var(--mg-weight-semibold) 16px/1 var(--mg-font-sans); gap: 10px; }  .mg-pagination .page-numbers.next::before { content: "Next"; } .mg-pagination .page-numbers.prev::after { content: "Previous"; }  .mg-lead-magnet { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 96px; align-items: center; } .mg-lead-magnet .mg-eyebrow, .mg-lead-magnet .mg-lead, .mg-lead-magnet .mg-display { color: var(--mg-text-on-dark); } .mg-lead-magnet .mg-lead { max-width: 520px; } .mg-lead-magnet__card { padding: 0 40px 40px; transform: rotate(1.4deg); } .mg-lead-magnet__card .mg-index-card__head { align-self: stretch; width: auto; max-width: none; margin: 0 -40px 24px; padding: 0 40px 12px; } .mg-lead-magnet__list { margin: 0 0 32px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; } .mg-lead-magnet__list li { padding-left: 36px; background: var(--mg-icon-tick) no-repeat 0 50% / 24px 24px; font: var(--mg-weight-medium) 17px/1.3 var(--mg-font-sans); }  .mg-lead-magnet__card .mg-form { row-gap: 22px; } .mg-lead-magnet__card .mg-form .submit-button-wrapper { width: 100%; margin-top: 0; } .mg-lead-magnet__card .mg-form .submit-button-wrapper .bricks-button { width: 100%; height: 58px; justify-content: center; font-size: 17px; }  .mg-post-header { max-width: 1040px; margin: 0 auto; padding-top: 72px; display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; } .mg-post-header__cat { padding: 6px 0; font: var(--mg-weight-bold) clamp(13px, 12.63px + 0.095vw, 14px)/1 var(--mg-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mg-pen); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; } .mg-post-header__cat:hover { color: var(--mg-ink); } .mg-post-header__cat a { color: inherit; text-decoration: inherit; text-decoration-thickness: inherit; text-underline-offset: inherit; } .mg-post-title { margin: 0; font: var(--mg-weight-black) var(--mg-text-post-title)/.9 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: var(--mg-ls-mega); text-wrap: balance; } .mg-post-meta { font: var(--mg-weight-regular) var(--mg-text-mono-lg)/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-eyebrow); text-transform: uppercase; color: var(--mg-text-muted); } .mg-post-hero { position: relative; margin-top: 80px; aspect-ratio: 16 / 7; background: var(--mg-blush); border: var(--mg-rule); border-radius: var(--mg-radius-s); overflow: hidden; } .mg-post-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }  .mg-article { position: relative; max-width: var(--mg-measure-article); margin: 0 auto; padding-top: 104px; font: var(--mg-weight-regular) var(--mg-text-article)/1.7 var(--mg-font-sans); color: var(--mg-ink-soft); } .mg-article > * { margin: 0 0 var(--mg-article-flow); } .mg-article > :last-child { margin-bottom: 0; } .mg-article p { text-wrap: pretty; } .mg-article > p:first-child, .mg-article .is-style-lede { font-size: var(--mg-text-article-lede); font-weight: var(--mg-weight-medium); line-height: 1.5; color: var(--mg-ink); } .mg-article a { color: var(--mg-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: var(--mg-pen); text-underline-offset: 4px; } .mg-article a:hover { color: var(--mg-pen); } .mg-article h2 { margin: 72px 0 22px; font: var(--mg-weight-black) var(--mg-text-article-h2)/.96 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: -0.03em; color: var(--mg-ink); } .mg-article h3 { margin: 52px 0 16px; font: var(--mg-weight-bold) var(--mg-text-article-h3)/1.2 var(--mg-font-sans); letter-spacing: -0.012em; color: var(--mg-ink); } .mg-article ul { padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; } .mg-article ul li { position: relative; padding-left: 40px; } .mg-article ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 22px; height: 8px; background: var(--mg-icon-dash) no-repeat center / contain; } .mg-article ol { padding-left: 1.4em; display: flex; flex-direction: column; gap: 14px; } .mg-article ol li::marker { font: var(--mg-weight-bold) .9em var(--mg-font-mono); color: var(--mg-pen); } .mg-article :is(blockquote, .wp-block-pullquote) { position: relative; margin: 72px -64px; padding: 0 0 0 64px; border: 0; font: var(--mg-weight-black) var(--mg-text-pullquote)/.98 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: -0.03em; color: var(--mg-ink); text-align: left; text-wrap: balance; } .mg-article .wp-block-pullquote blockquote { margin: 0; padding: 0; } .mg-article .wp-block-pullquote blockquote::before { display: none; } .mg-article :is(blockquote, .wp-block-pullquote)::before { content: "\201C"; position: absolute; left: 0; top: -14px; font: var(--mg-weight-regular) 120px/1 var(--mg-font-hand); color: var(--mg-pen); } .mg-article :is(blockquote, .wp-block-pullquote) p { margin: 0; font: inherit; } .mg-article :is(blockquote, .wp-block-pullquote) cite { display: block; margin-top: 20px; font: var(--mg-weight-regular) 14px/1.4 var(--mg-font-mono); font-stretch: 100%; letter-spacing: var(--mg-ls-mono); text-transform: uppercase; color: var(--mg-text-muted); } .mg-article figure, .mg-article .wp-block-image { position: relative; margin: 56px 0; } .mg-article .wp-block-image img { display: block; width: 100%; height: auto; padding: 12px; background: var(--mg-paper-card); box-shadow: 0 22px 34px -22px rgba(23, 22, 20, .55); transform: rotate(-1deg); box-sizing: border-box; } .mg-article .wp-block-image::before, .mg-article .wp-block-image::after { content: ""; position: absolute; z-index: 2; top: -13px; width: 96px; height: 26px; background: var(--mg-tape-strong); clip-path: var(--mg-tape-clip); pointer-events: none; } .mg-article .wp-block-image::before { left: 40px; transform: rotate(-6deg); } .mg-article .wp-block-image::after { right: 40px; transform: rotate(5deg); } .mg-article figcaption, .mg-article .wp-element-caption { margin: 16px 0 0; font: var(--mg-weight-regular) 14px/1.5 var(--mg-font-mono); letter-spacing: .02em; color: var(--mg-text-muted); text-align: left; }  .mg-article .mg-article-tip { position: relative; margin: 56px 0; padding: 34px 36px 32px; background: var(--mg-highlighter); color: var(--mg-ink); transform: rotate(-.8deg); box-shadow: 0 18px 26px -20px rgba(23, 22, 20, .55); } .mg-article .mg-article-tip::before { content: ""; position: absolute; z-index: 2; top: -13px; left: 50%; margin-left: -48px; width: 96px; height: 26px; background: var(--mg-tape-strong); clip-path: var(--mg-tape-clip); transform: rotate(3deg); } .mg-article .mg-article-tip > * { margin: 0; } .mg-article .mg-article-tip p { font: var(--mg-weight-medium) clamp(17px, 16.11px + 0.229vw, 20px)/1.55 var(--mg-font-sans); color: var(--mg-ink); } .mg-article .mg-article-tip .mg-article-tip__label { margin-bottom: 12px; font: var(--mg-weight-bold) 13px/1 var(--mg-font-mono); letter-spacing: .12em; text-transform: uppercase; }  .mg-inline-cta { position: relative; margin: 56px 0; padding: 30px 34px; background: var(--mg-blush); border: var(--mg-rule); border-radius: var(--mg-radius-l); display: flex; align-items: center; justify-content: space-between; gap: 28px; } .mg-inline-cta > * { margin: 0; } .mg-inline-cta__title { font: var(--mg-weight-black) clamp(28px, 25.77px + 0.571vw, 34px)/.98 var(--mg-font-display); font-stretch: var(--mg-stretch-condensed); letter-spacing: -0.025em; color: var(--mg-ink); } .mg-article .mg-inline-cta .mg-btn, .mg-inline-cta .wp-block-button__link { flex: none; height: 52px; padding: 0 24px; display: inline-flex; align-items: center; gap: 10px; border-radius: var(--mg-radius-pill); border: var(--mg-rule); background: transparent; color: var(--mg-ink); font: var(--mg-weight-semibold) 16px/1 var(--mg-font-sans); text-decoration: none; box-sizing: border-box; transition: background var(--mg-dur-hover); } .mg-article .mg-inline-cta .mg-btn:hover, .mg-inline-cta .wp-block-button__link:hover { background: var(--mg-highlighter); color: var(--mg-ink); }  .mg-article .mg-margin-note { position: absolute; right: 100%; width: 200px; margin: -6px 36px 0 0; transform: rotate(-5deg); font: var(--mg-weight-regular) 30px/.95 var(--mg-font-hand); color: var(--mg-pen); text-align: right; letter-spacing: 0; }  .mg-author-box { max-width: var(--mg-measure-article); margin: 0 auto; padding-top: 44px; border-top: var(--mg-rule); display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 28px; align-items: center; } .mg-author-box__photo { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; background: var(--mg-photo); border: var(--mg-rule); box-sizing: border-box; } .mg-author-box__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); } .mg-author-box__text { display: flex; flex-direction: column; gap: 8px; } .mg-author-box__by { display: flex; align-items: baseline; gap: 10px; } .mg-author-box__label { font: var(--mg-weight-regular) clamp(12px, 11.26px + 0.190vw, 14px)/1 var(--mg-font-mono); letter-spacing: var(--mg-ls-eyebrow); text-transform: uppercase; color: var(--mg-text-muted); } .mg-author-box__name { font: var(--mg-weight-regular) clamp(38px, 35.03px + 0.762vw, 46px)/.8 var(--mg-font-hand); color: var(--mg-pen); } .mg-author-box__bio { margin: 0; font: var(--mg-weight-regular) clamp(16px, 15.26px + 0.190vw, 18px)/1.5 var(--mg-font-sans); color: var(--mg-text-muted); }  @media (max-width: 1199px) { .mg-article .mg-margin-note { position: static; width: auto; margin: 0 0 16px; transform: rotate(-2deg); font-size: 26px; text-align: left; } .mg-article :is(blockquote, .wp-block-pullquote) { margin-inline: 0; } } @media (max-width: 991px) { .mg-blog-hero__row, .mg-lead-magnet { grid-template-columns: minmax(0, 1fr); gap: 28px; } .mg-lead-magnet { gap: 44px; } .mg-post-feature { grid-template-columns: minmax(0, 1fr); gap: 20px; } } @media (max-width: 767px) { .mg-blog-hero { padding-top: 28px; } .mg-blog-hero__row .mg-lead { margin: 0; } .mg-blog-filter { margin-top: 36px; padding-top: 20px; } .mg-blog-filter__label { display: none; } .mg-blog-filter__list { max-width: none; margin-inline: calc(var(--mg-gutter) * -1); padding: 0 var(--mg-gutter) 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; white-space: nowrap; } .mg-blog-filter__list::-webkit-scrollbar { display: none; } .mg-blog-filter__list .mg-chip { flex: none; height: 44px; } .mg-post-feature__body { gap: 14px; } .mg-post-feature .mg-link { display: none; } .mg-post-card { gap: 18px; } .mg-post-card__body { gap: 10px; } .mg-pagination { padding-top: 22px; } .mg-pagination ul.page-numbers { gap: 6px; justify-content: space-between; } .mg-pagination li:has(.prev), .mg-pagination li:has(.next) { margin: 0; } .mg-pagination .page-numbers:is(a, span) { width: 44px; height: 44px; font-size: 16px; } .mg-pagination .page-numbers.dots { width: 20px; } .mg-pagination .page-numbers:is(.prev, .next) { width: 44px; padding: 0; border: 0; font-size: 0; } .mg-pagination .page-numbers.prev::after { content: "\2190"; font: var(--mg-weight-bold) 18px/1 var(--mg-font-mono); } .mg-pagination .page-numbers.next::after { content: "\2192"; font: var(--mg-weight-bold) 18px/1 var(--mg-font-mono); } .mg-lead-magnet__card { transform: rotate(1deg); padding: 0 22px 26px; } .mg-lead-magnet__card .mg-index-card__head { height: 56px; margin: 0 -22px 20px; padding: 0 22px 10px; font-size: 11.5px; } .mg-lead-magnet__list { display: none; } .mg-lead-magnet__card .mg-form { row-gap: 18px; } .mg-lead-magnet__card .mg-form .submit-button-wrapper .bricks-button { height: 56px; font-size: 16px; } .mg-post-header { padding-top: 32px; align-items: flex-start; gap: 20px; text-align: left; } .mg-post-title { line-height: .92; letter-spacing: -0.035em; } .mg-post-hero { width: auto; max-width: none; margin: 36px calc(var(--mg-gutter) * -1) 0; aspect-ratio: 4 / 3; border-radius: 0; border-inline: 0; } .mg-article { padding-top: 48px; line-height: 1.7; } .mg-article h2 { margin: 52px 0 16px; } .mg-article h3 { margin: 40px 0 12px; } .mg-article ul li { padding-left: 34px; } .mg-article :is(blockquote, .wp-block-pullquote) { margin: 48px 0; padding-left: 36px; } .mg-article :is(blockquote, .wp-block-pullquote)::before { left: -4px; top: -10px; font-size: 84px; } .mg-article figure, .mg-article .wp-block-image { margin: 40px 0; } .mg-article .wp-block-image img { padding: 8px; } .mg-article .wp-block-image::before, .mg-article .wp-block-image::after { width: 76px; height: 22px; top: -11px; } .mg-article .wp-block-image::before { left: 24px; } .mg-article .wp-block-image::after { display: none; } .mg-article .mg-article-tip { margin: 40px 0; padding: 26px 22px 24px; } .mg-inline-cta { margin: 40px 0; padding: 22px; flex-direction: column; align-items: flex-start; gap: 16px; } .mg-article .mg-inline-cta .mg-btn, .mg-inline-cta .wp-block-button__link { height: 48px; padding: 0 22px; font-size: 15px; } .mg-author-box { padding-top: 32px; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; align-items: start; } .mg-author-box__photo { width: 76px; height: 76px; } .mg-author-box__text { gap: 6px; } .mg-author-box__by { gap: 8px; } }