/* ============================================================ Jack London International — Design Tokens colors_and_type.css ------------------------------------------------------------ A literary-archive design system. Parchment + sepia ink, wine-red accent, Cormorant Garamond + Source Serif 4. Token names use ASCII; values use modern CSS (oklch fallbacks provided where helpful). ============================================================ */ /* ------------------------------------------------------------ 1. Webfonts — self-hosted (DSGVO/GDPR: no external CDN calls) Local woff2, latin + latin-ext subsets. To update, re-export from Google Fonts and replace the files in assets/fonts/. ------------------------------------------------------------ */ @font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/cormorant-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/cormorant-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:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/cormorant-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/cormorant-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:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(assets/fonts/cormorant-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(assets/fonts/cormorant-500-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:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/cormorant-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/cormorant-500-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:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;src:url(assets/fonts/cormorant-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;src:url(assets/fonts/cormorant-600-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:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/cormorant-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/cormorant-600-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:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/cormorant-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/cormorant-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:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/jetbrains-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/jetbrains-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:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/jetbrains-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/jetbrains-500-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:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/jetbrains-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/jetbrains-600-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:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/source-serif-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/source-serif-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:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/source-serif-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/source-serif-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:'Source Serif 4';font-style:italic;font-weight:500;font-display:swap;src:url(assets/fonts/source-serif-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Source Serif 4';font-style:italic;font-weight:500;font-display:swap;src:url(assets/fonts/source-serif-500-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:'Source Serif 4';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/source-serif-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Source Serif 4';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/source-serif-500-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:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/source-serif-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/source-serif-600-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:'Source Serif 4';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/source-serif-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Source Serif 4';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/source-serif-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;} /* ------------------------------------------------------------ 2. Token layer (root) ------------------------------------------------------------ */ :root { /* ----- Color: surfaces ---------------------------------- */ --parchment: #F4ECDB; --parchment-deep: #EBE0C8; --parchment-edge: #DCCFB1; --paper-white: #FBF7EE; /* ----- Color: ink --------------------------------------- */ --ink: #1B1310; --ink-soft: #3D3128; --ink-mute: #6B5A4D; --ink-faint: #9A8973; /* ----- Color: brand accents ----------------------------- */ --wine: #6B1A1F; /* primary — modernized from legacy #660000 */ --wine-dark: #4A0F12; /* hover / pressed */ --wine-bright: #931F26; /* visited links, secondary emphasis */ --wine-mute: #8C5158; /* tinted / disabled */ --gold: #A8842B; /* drop-caps, pull-quotes, divider accents */ --gold-mute: #C9A95E; /* ----- Color: theme accents (one per theme page) -------- */ --moss: #3B4A39; /* Yukon, dogs */ --moss-mute: #6B7969; --sea: #2C4459; /* South Seas, sailing */ --sea-mute: #5E7387; --rust: #8C4A2B; /* Klondike, Sonoma earth */ --rust-mute: #B57E5D; /* ----- Color: structural -------------------------------- */ --rule: rgba(27, 19, 16, 0.18); --rule-soft: rgba(27, 19, 16, 0.10); --rule-strong: rgba(27, 19, 16, 0.32); --hairline: rgba(27, 19, 16, 0.12); /* ----- Color: status ------------------------------------ */ --info: #2C4459; --danger: #6B1A1F; --success: #3B4A39; /* ----- Type: families ----------------------------------- */ --ff-display: "Cormorant Garamond", "EB Garamond", Garamond, "Adobe Garamond Pro", Georgia, serif; --ff-body: "Source Serif 4", "Source Serif Pro", "Lyon Text", "Charter", Georgia, serif; --ff-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "Consolas", monospace; /* ----- Type: weights ------------------------------------ */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* ----- Type: scale (px / line-height) ------------------- */ --fs-hero: 72px; --lh-hero: 1.05; --fs-h1: 48px; --lh-h1: 1.12; --fs-h2: 32px; --lh-h2: 1.20; --fs-h3: 22px; --lh-h3: 1.35; --fs-lead: 21px; --lh-lead: 1.55; --fs-body: 18px; --lh-body: 1.70; --fs-small: 15px; --lh-small:1.50; --fs-meta: 12.5px; --lh-meta: 1.45; /* ----- Tracking ----------------------------------------- */ --tr-tight: -0.012em; --tr-normal: 0; --tr-meta: 0.08em; --tr-allcaps: 0.12em; /* ----- Spacing scale (8-px base) ------------------------ */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 40px; --s-6: 64px; --s-7: 96px; --s-8: 144px; /* ----- Radii -------------------------------------------- */ --r-0: 0; --r-1: 2px; /* image cards */ --r-2: 3px; /* buttons, fields */ --r-pill: 999px; /* ----- Shadows ------------------------------------------ */ --shadow-card: 0 1px 0 rgba(27,19,16,.04), 0 6px 18px -8px rgba(27,19,16,.16); --shadow-card-hi: 0 1px 0 rgba(27,19,16,.06), 0 12px 28px -10px rgba(27,19,16,.24); --shadow-book: 0 2px 1px rgba(0,0,0,.08), 0 12px 28px -12px rgba(0,0,0,.35), 6px 0 12px -8px rgba(0,0,0,.18); --shadow-image: inset 0 0 0 1px rgba(27,19,16,.08), 0 1px 2px rgba(27,19,16,.06); --shadow-elevated: 0 24px 60px -24px rgba(27,19,16,.32); /* ----- Motion ------------------------------------------- */ --ease-paper: cubic-bezier(0.20, 0.65, 0.30, 1.00); --t-fast: 140ms; --t-base: 240ms; --t-slow: 400ms; --t-stage: 600ms; /* ----- Layout ------------------------------------------- */ --w-page: 1200px; --w-prose: 38rem; /* ~608px reading column */ --w-prose-wide: 46rem; /* 736px — when figures are inline */ --header-h: 72px; --header-h-tall: 88px; } /* ------------------------------------------------------------ 3. Base reset (lightweight) ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--parchment); color: var(--ink); font-family: var(--ff-body); font-size: var(--fs-body); line-height: var(--lh-body); font-feature-settings: "kern", "liga", "onum"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { margin: 0; } img, svg { display: block; max-width: 100%; height: auto; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } a { color: var(--wine); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--t-base) var(--ease-paper), text-decoration-thickness var(--t-base) var(--ease-paper); } a:hover { color: var(--wine-dark); text-decoration-thickness: 2px; } a:visited { color: var(--wine-bright); } a:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; border-radius: var(--r-2); } ::selection { background: var(--wine); color: var(--paper-white); } /* ------------------------------------------------------------ 4. Semantic type classes ------------------------------------------------------------ */ .t-hero { font-family: var(--ff-display); font-weight: var(--fw-medium); font-size: clamp(48px, 6vw + 1rem, var(--fs-hero)); line-height: var(--lh-hero); letter-spacing: var(--tr-tight); color: var(--ink); } .t-h1 { font-family: var(--ff-display); font-weight: var(--fw-medium); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-tight); } .t-h2 { font-family: var(--ff-display); font-weight: var(--fw-medium); font-size: var(--fs-h2); line-height: var(--lh-h2); } .t-h3 { font-family: var(--ff-body); font-weight: var(--fw-semi); font-size: var(--fs-h3); line-height: var(--lh-h3); } .t-lead { font-family: var(--ff-body); font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-soft); } .t-body { font-family: var(--ff-body); font-size: var(--fs-body); line-height: var(--lh-body); } .t-small { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-soft); } .t-meta { font-family: var(--ff-mono); font-size: var(--fs-meta); line-height: var(--lh-meta); letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--ink-mute); } .t-italic { font-style: italic; } /* ------------------------------------------------------------ 5. Prose — the reading column ------------------------------------------------------------ */ .prose { max-width: var(--w-prose); font-family: var(--ff-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; } .prose p { margin: 0 0 1.25em; } .prose p + p { text-indent: 0; } .prose h2 { font-family: var(--ff-display); font-weight: var(--fw-medium); font-size: var(--fs-h2); line-height: var(--lh-h2); margin: 2em 0 0.5em; } .prose h3 { font-family: var(--ff-body); font-weight: var(--fw-semi); font-size: var(--fs-h3); line-height: var(--lh-h3); margin: 1.5em 0 0.5em; } .prose em { font-style: italic; } .prose cite { font-style: italic; } .prose blockquote { font-family: var(--ff-display); font-style: italic; font-size: 1.4em; line-height: 1.4; color: var(--ink-soft); border-left: 2px solid var(--gold); padding: 0.25em 0 0.25em 1em; margin: 1.75em 0; } .prose blockquote footer { font-family: var(--ff-mono); font-size: var(--fs-meta); letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--ink-mute); font-style: normal; margin-top: 0.6em; } /* Drop-cap on the first paragraph of an essay Spans ~4 lines of body type — a true editorial dropcap. */ .prose.essay > p:first-of-type::first-letter, .prose .dropcap::first-letter { font-family: var(--ff-display); font-weight: var(--fw-semi); font-size: 6.4em; line-height: 0.82; float: left; padding: 0.04em 0.10em 0 0; margin-top: 0.02em; color: var(--wine); font-feature-settings: "lnum", "kern"; } /* Section break — used as
or a div */ .fleuron { display: block; border: 0; margin: var(--s-6) auto; text-align: center; color: var(--gold); font-family: var(--ff-display); font-size: 24px; letter-spacing: 0.6em; width: 100%; } .fleuron::before { content: "❦"; } /* ------------------------------------------------------------ 6. Layout primitives ------------------------------------------------------------ */ .page { max-width: var(--w-page); margin: 0 auto; padding: 0 var(--s-5); } @media (max-width: 720px) { .page { padding: 0 var(--s-3); } } .section { padding: var(--s-7) 0; } .section.tight { padding: var(--s-5) 0; } .shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-4); align-items: start; } .rule { border: 0; border-top: 1px solid var(--rule); margin: var(--s-5) 0; } /* ------------------------------------------------------------ 7. Header / nav ------------------------------------------------------------ */ .archive-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); display: flex; align-items: center; background: rgba(244, 236, 219, 0.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); } .archive-header .page { display: flex; align-items: center; gap: var(--s-5); width: 100%; } .archive-header .brand { display: flex; align-items: center; gap: var(--s-3); font-family: var(--ff-display); font-weight: var(--fw-semi); font-size: 22px; color: var(--ink); text-decoration: none; } .archive-header .brand img { height: 44px; width: auto; } .archive-header nav { display: flex; gap: var(--s-4); margin-left: auto; } .archive-header nav a { font-family: var(--ff-body); font-size: 15px; font-weight: var(--fw-medium); color: var(--ink-soft); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; } .archive-header nav a:hover { color: var(--wine); border-bottom-color: var(--wine); } .archive-header nav a.is-active { color: var(--wine); border-bottom-color: var(--wine); } /* ------------------------------------------------------------ 8. Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; gap: var(--s-2); padding: 10px 18px; font-family: var(--ff-body); font-weight: var(--fw-semi); font-size: 15px; border-radius: var(--r-2); transition: background var(--t-base) var(--ease-paper), color var(--t-base) var(--ease-paper), border-color var(--t-base) var(--ease-paper), transform var(--t-fast) var(--ease-paper); cursor: pointer; text-decoration: none; } .btn-primary { background: var(--wine); color: var(--paper-white); border: 1px solid var(--wine); } .btn-primary:hover { background: var(--wine-dark); border-color: var(--wine-dark); color: var(--paper-white); } .btn-primary:active { transform: translateY(1px); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); } .btn-ghost:hover { border-color: var(--ink); } .btn-link { background: transparent; border: 0; padding: 0; color: var(--wine); text-decoration: underline; text-underline-offset: 3px; } /* ------------------------------------------------------------ 9. Cards ------------------------------------------------------------ */ .card { background: var(--parchment-deep); border: 1px solid var(--rule-soft); border-radius: var(--r-1); padding: var(--s-4); box-shadow: var(--shadow-card); transition: transform var(--t-base) var(--ease-paper), box-shadow var(--t-base) var(--ease-paper); } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hi); } .card-tight { padding: var(--s-3); } /* Book cover element — uses the legacy "book on a shelf" shadow */ .book-cover { display: block; background: var(--parchment-deep); box-shadow: var(--shadow-book); position: relative; overflow: hidden; } .book-cover img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ------------------------------------------------------------ 10. Sepia treatment for any photo ------------------------------------------------------------ */ .sepia { filter: sepia(40%) saturate(80%) brightness(0.96) contrast(1.04); box-shadow: var(--shadow-image); } .sepia-strong { filter: sepia(85%) saturate(70%) brightness(0.94) contrast(1.08); } .portrait-oval { border-radius: 50%/45%; overflow: hidden; border: 1px solid var(--rule); background: var(--parchment-deep); padding: 6px; } .portrait-oval img { border-radius: 50%/45%; display: block; } /* ------------------------------------------------------------ 11. Forms ------------------------------------------------------------ */ .field { display: block; width: 100%; padding: 10px 14px; background: var(--paper-white); border: 1px solid var(--rule); border-radius: var(--r-2); font-family: var(--ff-body); font-size: 16px; color: var(--ink); transition: border-color var(--t-base) var(--ease-paper), box-shadow var(--t-base) var(--ease-paper); } .field:focus { outline: none; border-color: var(--wine); box-shadow: 0 0 0 3px rgba(107,26,31,.18); } /* ------------------------------------------------------------ 12. Pills / tags ------------------------------------------------------------ */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); font-family: var(--ff-mono); font-size: var(--fs-meta); letter-spacing: var(--tr-meta); text-transform: uppercase; background: transparent; border: 1px solid var(--rule); color: var(--ink-soft); } .pill-wine { color: var(--wine); border-color: var(--wine-mute); } .pill-moss { color: var(--moss); border-color: var(--moss-mute); } .pill-sea { color: var(--sea); border-color: var(--sea-mute); } .pill-rust { color: var(--rust); border-color: var(--rust-mute); } .pill-solid { background: var(--ink); color: var(--paper-white); border-color: var(--ink); } /* ------------------------------------------------------------ 13. Catalog-row (used in bibliography) ------------------------------------------------------------ */ .cat-row { display: grid; grid-template-columns: 56px 1fr 1fr 120px 160px; align-items: baseline; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); } .cat-row .yr { font-family: var(--ff-mono); font-size: var(--fs-small); color: var(--ink-mute); } .cat-row .en { font-family: var(--ff-display); font-weight: var(--fw-medium); font-size: 20px; line-height: 1.25; } .cat-row .de { font-family: var(--ff-body); font-style: italic; color: var(--ink-soft); font-size: 17px; line-height: 1.3; } .cat-row .pub { font-family: var(--ff-mono); font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: var(--tr-meta); color: var(--ink-mute); } .cat-row .notes { font-size: var(--fs-small); color: var(--ink-soft); } /* ------------------------------------------------------------ 14. Utility ------------------------------------------------------------ */ .u-mono { font-family: var(--ff-mono); } .u-display { font-family: var(--ff-display); } .u-italic { font-style: italic; } .u-center { text-align: center; } .u-uppercase { text-transform: uppercase; letter-spacing: var(--tr-allcaps); } .u-wine { color: var(--wine); } .u-gold { color: var(--gold); } .u-moss { color: var(--moss); } .u-mute { color: var(--ink-mute); } .u-no-deco { text-decoration: none; } /* Paper texture utility — apply to cards or book covers */ .paper-texture { background-image: repeating-linear-gradient(0deg, rgba(27,19,16,.018) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(27,19,16,.012) 0 1px, transparent 1px 4px); background-blend-mode: multiply; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ------------------------------------------------------------ Icons — self-hosted Phosphor (light), only glyphs in use. GDPR/DSGVO: no external CDN. Inherits text color via mask. ------------------------------------------------------------ */ .ph{display:inline-block;width:1em;height:1em;vertical-align:-0.125em;background-color:currentColor;-webkit-mask:no-repeat center/contain;mask:no-repeat center/contain;} .ph-arrow-left{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M222%2C128a6%2C6%2C0%2C0%2C1-6%2C6H54.49l61.75%2C61.76a6%2C6%2C0%2C1%2C1-8.48%2C8.48l-72-72a6%2C6%2C0%2C0%2C1%2C0-8.48l72-72a6%2C6%2C0%2C0%2C1%2C8.48%2C8.48L54.49%2C122H216A6%2C6%2C0%2C0%2C1%2C222%2C128Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M222%2C128a6%2C6%2C0%2C0%2C1-6%2C6H54.49l61.75%2C61.76a6%2C6%2C0%2C1%2C1-8.48%2C8.48l-72-72a6%2C6%2C0%2C0%2C1%2C0-8.48l72-72a6%2C6%2C0%2C0%2C1%2C8.48%2C8.48L54.49%2C122H216A6%2C6%2C0%2C0%2C1%2C222%2C128Z%22%2F%3E%3C%2Fsvg%3E");} .ph-arrow-right{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M220.24%2C132.24l-72%2C72a6%2C6%2C0%2C0%2C1-8.48-8.48L201.51%2C134H40a6%2C6%2C0%2C0%2C1%2C0-12H201.51L139.76%2C60.24a6%2C6%2C0%2C0%2C1%2C8.48-8.48l72%2C72A6%2C6%2C0%2C0%2C1%2C220.24%2C132.24Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M220.24%2C132.24l-72%2C72a6%2C6%2C0%2C0%2C1-8.48-8.48L201.51%2C134H40a6%2C6%2C0%2C0%2C1%2C0-12H201.51L139.76%2C60.24a6%2C6%2C0%2C0%2C1%2C8.48-8.48l72%2C72A6%2C6%2C0%2C0%2C1%2C220.24%2C132.24Z%22%2F%3E%3C%2Fsvg%3E");} .ph-book-open{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M232%2C50H160a38%2C38%2C0%2C0%2C0-32%2C17.55A38%2C38%2C0%2C0%2C0%2C96%2C50H24a6%2C6%2C0%2C0%2C0-6%2C6V200a6%2C6%2C0%2C0%2C0%2C6%2C6H96a26%2C26%2C0%2C0%2C1%2C26%2C26%2C6%2C6%2C0%2C0%2C0%2C12%2C0%2C26%2C26%2C0%2C0%2C1%2C26-26h72a6%2C6%2C0%2C0%2C0%2C6-6V56A6%2C6%2C0%2C0%2C0%2C232%2C50ZM96%2C194H30V62H96a26%2C26%2C0%2C0%2C1%2C26%2C26V204.31A37.86%2C37.86%2C0%2C0%2C0%2C96%2C194Zm130%2C0H160a37.87%2C37.87%2C0%2C0%2C0-26%2C10.32V88a26%2C26%2C0%2C0%2C1%2C26-26h66Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M232%2C50H160a38%2C38%2C0%2C0%2C0-32%2C17.55A38%2C38%2C0%2C0%2C0%2C96%2C50H24a6%2C6%2C0%2C0%2C0-6%2C6V200a6%2C6%2C0%2C0%2C0%2C6%2C6H96a26%2C26%2C0%2C0%2C1%2C26%2C26%2C6%2C6%2C0%2C0%2C0%2C12%2C0%2C26%2C26%2C0%2C0%2C1%2C26-26h72a6%2C6%2C0%2C0%2C0%2C6-6V56A6%2C6%2C0%2C0%2C0%2C232%2C50ZM96%2C194H30V62H96a26%2C26%2C0%2C0%2C1%2C26%2C26V204.31A37.86%2C37.86%2C0%2C0%2C0%2C96%2C194Zm130%2C0H160a37.87%2C37.87%2C0%2C0%2C0-26%2C10.32V88a26%2C26%2C0%2C0%2C1%2C26-26h66Z%22%2F%3E%3C%2Fsvg%3E");} .ph-bookmark-simple{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M184%2C34H72A14%2C14%2C0%2C0%2C0%2C58%2C48V224a6%2C6%2C0%2C0%2C0%2C9.18%2C5.09l60.81-38%2C60.83%2C38A6%2C6%2C0%2C0%2C0%2C198%2C224V48A14%2C14%2C0%2C0%2C0%2C184%2C34Zm2%2C179.17-54.83-34.26a6%2C6%2C0%2C0%2C0-6.36%2C0L70%2C213.17V48a2%2C2%2C0%2C0%2C1%2C2-2H184a2%2C2%2C0%2C0%2C1%2C2%2C2Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M184%2C34H72A14%2C14%2C0%2C0%2C0%2C58%2C48V224a6%2C6%2C0%2C0%2C0%2C9.18%2C5.09l60.81-38%2C60.83%2C38A6%2C6%2C0%2C0%2C0%2C198%2C224V48A14%2C14%2C0%2C0%2C0%2C184%2C34Zm2%2C179.17-54.83-34.26a6%2C6%2C0%2C0%2C0-6.36%2C0L70%2C213.17V48a2%2C2%2C0%2C0%2C1%2C2-2H184a2%2C2%2C0%2C0%2C1%2C2%2C2Z%22%2F%3E%3C%2Fsvg%3E");} .ph-envelope-simple{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M224%2C50H32a6%2C6%2C0%2C0%2C0-6%2C6V192a14%2C14%2C0%2C0%2C0%2C14%2C14H216a14%2C14%2C0%2C0%2C0%2C14-14V56A6%2C6%2C0%2C0%2C0%2C224%2C50ZM208.58%2C62%2C128%2C135.86%2C47.42%2C62ZM216%2C194H40a2%2C2%2C0%2C0%2C1-2-2V69.64l86%2C78.78a6%2C6%2C0%2C0%2C0%2C8.1%2C0L218%2C69.64V192A2%2C2%2C0%2C0%2C1%2C216%2C194Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M224%2C50H32a6%2C6%2C0%2C0%2C0-6%2C6V192a14%2C14%2C0%2C0%2C0%2C14%2C14H216a14%2C14%2C0%2C0%2C0%2C14-14V56A6%2C6%2C0%2C0%2C0%2C224%2C50ZM208.58%2C62%2C128%2C135.86%2C47.42%2C62ZM216%2C194H40a2%2C2%2C0%2C0%2C1-2-2V69.64l86%2C78.78a6%2C6%2C0%2C0%2C0%2C8.1%2C0L218%2C69.64V192A2%2C2%2C0%2C0%2C1%2C216%2C194Z%22%2F%3E%3C%2Fsvg%3E");} .ph-frame-corners{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M198%2C80v32a6%2C6%2C0%2C0%2C1-12%2C0V86H160a6%2C6%2C0%2C0%2C1%2C0-12h32A6%2C6%2C0%2C0%2C1%2C198%2C80ZM96%2C170H70V144a6%2C6%2C0%2C0%2C0-12%2C0v32a6%2C6%2C0%2C0%2C0%2C6%2C6H96a6%2C6%2C0%2C0%2C0%2C0-12ZM230%2C56V200a14%2C14%2C0%2C0%2C1-14%2C14H40a14%2C14%2C0%2C0%2C1-14-14V56A14%2C14%2C0%2C0%2C1%2C40%2C42H216A14%2C14%2C0%2C0%2C1%2C230%2C56Zm-12%2C0a2%2C2%2C0%2C0%2C0-2-2H40a2%2C2%2C0%2C0%2C0-2%2C2V200a2%2C2%2C0%2C0%2C0%2C2%2C2H216a2%2C2%2C0%2C0%2C0%2C2-2Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M198%2C80v32a6%2C6%2C0%2C0%2C1-12%2C0V86H160a6%2C6%2C0%2C0%2C1%2C0-12h32A6%2C6%2C0%2C0%2C1%2C198%2C80ZM96%2C170H70V144a6%2C6%2C0%2C0%2C0-12%2C0v32a6%2C6%2C0%2C0%2C0%2C6%2C6H96a6%2C6%2C0%2C0%2C0%2C0-12ZM230%2C56V200a14%2C14%2C0%2C0%2C1-14%2C14H40a14%2C14%2C0%2C0%2C1-14-14V56A14%2C14%2C0%2C0%2C1%2C40%2C42H216A14%2C14%2C0%2C0%2C1%2C230%2C56Zm-12%2C0a2%2C2%2C0%2C0%2C0-2-2H40a2%2C2%2C0%2C0%2C0-2%2C2V200a2%2C2%2C0%2C0%2C0%2C2%2C2H216a2%2C2%2C0%2C0%2C0%2C2-2Z%22%2F%3E%3C%2Fsvg%3E");} .ph-globe{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M128%2C26A102%2C102%2C0%2C1%2C0%2C230%2C128%2C102.12%2C102.12%2C0%2C0%2C0%2C128%2C26Zm81.57%2C64H169.19a132.58%2C132.58%2C0%2C0%2C0-25.73-50.67A90.29%2C90.29%2C0%2C0%2C1%2C209.57%2C90ZM218%2C128a89.7%2C89.7%2C0%2C0%2C1-3.83%2C26H171.81a155.43%2C155.43%2C0%2C0%2C0%2C0-52h42.36A89.7%2C89.7%2C0%2C0%2C1%2C218%2C128Zm-90%2C87.83a110%2C110%2C0%2C0%2C1-15.19-19.45A124.24%2C124.24%2C0%2C0%2C1%2C99.35%2C166h57.3a124.24%2C124.24%2C0%2C0%2C1-13.46%2C30.38A110%2C110%2C0%2C0%2C1%2C128%2C215.83ZM96.45%2C154a139.18%2C139.18%2C0%2C0%2C1%2C0-52h63.1a139.18%2C139.18%2C0%2C0%2C1%2C0%2C52ZM38%2C128a89.7%2C89.7%2C0%2C0%2C1%2C3.83-26H84.19a155.43%2C155.43%2C0%2C0%2C0%2C0%2C52H41.83A89.7%2C89.7%2C0%2C0%2C1%2C38%2C128Zm90-87.83a110%2C110%2C0%2C0%2C1%2C15.19%2C19.45A124.24%2C124.24%2C0%2C0%2C1%2C156.65%2C90H99.35a124.24%2C124.24%2C0%2C0%2C1%2C13.46-30.38A110%2C110%2C0%2C0%2C1%2C128%2C40.17Zm-15.46-.84A132.58%2C132.58%2C0%2C0%2C0%2C86.81%2C90H46.43A90.29%2C90.29%2C0%2C0%2C1%2C112.54%2C39.33ZM46.43%2C166H86.81a132.58%2C132.58%2C0%2C0%2C0%2C25.73%2C50.67A90.29%2C90.29%2C0%2C0%2C1%2C46.43%2C166Zm97%2C50.67A132.58%2C132.58%2C0%2C0%2C0%2C169.19%2C166h40.38A90.29%2C90.29%2C0%2C0%2C1%2C143.46%2C216.67Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M128%2C26A102%2C102%2C0%2C1%2C0%2C230%2C128%2C102.12%2C102.12%2C0%2C0%2C0%2C128%2C26Zm81.57%2C64H169.19a132.58%2C132.58%2C0%2C0%2C0-25.73-50.67A90.29%2C90.29%2C0%2C0%2C1%2C209.57%2C90ZM218%2C128a89.7%2C89.7%2C0%2C0%2C1-3.83%2C26H171.81a155.43%2C155.43%2C0%2C0%2C0%2C0-52h42.36A89.7%2C89.7%2C0%2C0%2C1%2C218%2C128Zm-90%2C87.83a110%2C110%2C0%2C0%2C1-15.19-19.45A124.24%2C124.24%2C0%2C0%2C1%2C99.35%2C166h57.3a124.24%2C124.24%2C0%2C0%2C1-13.46%2C30.38A110%2C110%2C0%2C0%2C1%2C128%2C215.83ZM96.45%2C154a139.18%2C139.18%2C0%2C0%2C1%2C0-52h63.1a139.18%2C139.18%2C0%2C0%2C1%2C0%2C52ZM38%2C128a89.7%2C89.7%2C0%2C0%2C1%2C3.83-26H84.19a155.43%2C155.43%2C0%2C0%2C0%2C0%2C52H41.83A89.7%2C89.7%2C0%2C0%2C1%2C38%2C128Zm90-87.83a110%2C110%2C0%2C0%2C1%2C15.19%2C19.45A124.24%2C124.24%2C0%2C0%2C1%2C156.65%2C90H99.35a124.24%2C124.24%2C0%2C0%2C1%2C13.46-30.38A110%2C110%2C0%2C0%2C1%2C128%2C40.17Zm-15.46-.84A132.58%2C132.58%2C0%2C0%2C0%2C86.81%2C90H46.43A90.29%2C90.29%2C0%2C0%2C1%2C112.54%2C39.33ZM46.43%2C166H86.81a132.58%2C132.58%2C0%2C0%2C0%2C25.73%2C50.67A90.29%2C90.29%2C0%2C0%2C1%2C46.43%2C166Zm97%2C50.67A132.58%2C132.58%2C0%2C0%2C0%2C169.19%2C166h40.38A90.29%2C90.29%2C0%2C0%2C1%2C143.46%2C216.67Z%22%2F%3E%3C%2Fsvg%3E");} .ph-magnifying-glass{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M228.24%2C219.76l-51.38-51.38a86.15%2C86.15%2C0%2C1%2C0-8.48%2C8.48l51.38%2C51.38a6%2C6%2C0%2C0%2C0%2C8.48-8.48ZM38%2C112a74%2C74%2C0%2C1%2C1%2C74%2C74A74.09%2C74.09%2C0%2C0%2C1%2C38%2C112Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M228.24%2C219.76l-51.38-51.38a86.15%2C86.15%2C0%2C1%2C0-8.48%2C8.48l51.38%2C51.38a6%2C6%2C0%2C0%2C0%2C8.48-8.48ZM38%2C112a74%2C74%2C0%2C1%2C1%2C74%2C74A74.09%2C74.09%2C0%2C0%2C1%2C38%2C112Z%22%2F%3E%3C%2Fsvg%3E");} .ph-rows{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M208%2C138H48a14%2C14%2C0%2C0%2C0-14%2C14v40a14%2C14%2C0%2C0%2C0%2C14%2C14H208a14%2C14%2C0%2C0%2C0%2C14-14V152A14%2C14%2C0%2C0%2C0%2C208%2C138Zm2%2C54a2%2C2%2C0%2C0%2C1-2%2C2H48a2%2C2%2C0%2C0%2C1-2-2V152a2%2C2%2C0%2C0%2C1%2C2-2H208a2%2C2%2C0%2C0%2C1%2C2%2C2ZM208%2C50H48A14%2C14%2C0%2C0%2C0%2C34%2C64v40a14%2C14%2C0%2C0%2C0%2C14%2C14H208a14%2C14%2C0%2C0%2C0%2C14-14V64A14%2C14%2C0%2C0%2C0%2C208%2C50Zm2%2C54a2%2C2%2C0%2C0%2C1-2%2C2H48a2%2C2%2C0%2C0%2C1-2-2V64a2%2C2%2C0%2C0%2C1%2C2-2H208a2%2C2%2C0%2C0%2C1%2C2%2C2Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M208%2C138H48a14%2C14%2C0%2C0%2C0-14%2C14v40a14%2C14%2C0%2C0%2C0%2C14%2C14H208a14%2C14%2C0%2C0%2C0%2C14-14V152A14%2C14%2C0%2C0%2C0%2C208%2C138Zm2%2C54a2%2C2%2C0%2C0%2C1-2%2C2H48a2%2C2%2C0%2C0%2C1-2-2V152a2%2C2%2C0%2C0%2C1%2C2-2H208a2%2C2%2C0%2C0%2C1%2C2%2C2ZM208%2C50H48A14%2C14%2C0%2C0%2C0%2C34%2C64v40a14%2C14%2C0%2C0%2C0%2C14%2C14H208a14%2C14%2C0%2C0%2C0%2C14-14V64A14%2C14%2C0%2C0%2C0%2C208%2C50Zm2%2C54a2%2C2%2C0%2C0%2C1-2%2C2H48a2%2C2%2C0%2C0%2C1-2-2V64a2%2C2%2C0%2C0%2C1%2C2-2H208a2%2C2%2C0%2C0%2C1%2C2%2C2Z%22%2F%3E%3C%2Fsvg%3E");} .ph-squares-four{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M104%2C42H56A14%2C14%2C0%2C0%2C0%2C42%2C56v48a14%2C14%2C0%2C0%2C0%2C14%2C14h48a14%2C14%2C0%2C0%2C0%2C14-14V56A14%2C14%2C0%2C0%2C0%2C104%2C42Zm2%2C62a2%2C2%2C0%2C0%2C1-2%2C2H56a2%2C2%2C0%2C0%2C1-2-2V56a2%2C2%2C0%2C0%2C1%2C2-2h48a2%2C2%2C0%2C0%2C1%2C2%2C2Zm94-62H152a14%2C14%2C0%2C0%2C0-14%2C14v48a14%2C14%2C0%2C0%2C0%2C14%2C14h48a14%2C14%2C0%2C0%2C0%2C14-14V56A14%2C14%2C0%2C0%2C0%2C200%2C42Zm2%2C62a2%2C2%2C0%2C0%2C1-2%2C2H152a2%2C2%2C0%2C0%2C1-2-2V56a2%2C2%2C0%2C0%2C1%2C2-2h48a2%2C2%2C0%2C0%2C1%2C2%2C2Zm-98%2C34H56a14%2C14%2C0%2C0%2C0-14%2C14v48a14%2C14%2C0%2C0%2C0%2C14%2C14h48a14%2C14%2C0%2C0%2C0%2C14-14V152A14%2C14%2C0%2C0%2C0%2C104%2C138Zm2%2C62a2%2C2%2C0%2C0%2C1-2%2C2H56a2%2C2%2C0%2C0%2C1-2-2V152a2%2C2%2C0%2C0%2C1%2C2-2h48a2%2C2%2C0%2C0%2C1%2C2%2C2Zm94-62H152a14%2C14%2C0%2C0%2C0-14%2C14v48a14%2C14%2C0%2C0%2C0%2C14%2C14h48a14%2C14%2C0%2C0%2C0%2C14-14V152A14%2C14%2C0%2C0%2C0%2C200%2C138Zm2%2C62a2%2C2%2C0%2C0%2C1-2%2C2H152a2%2C2%2C0%2C0%2C1-2-2V152a2%2C2%2C0%2C0%2C1%2C2-2h48a2%2C2%2C0%2C0%2C1%2C2%2C2Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M104%2C42H56A14%2C14%2C0%2C0%2C0%2C42%2C56v48a14%2C14%2C0%2C0%2C0%2C14%2C14h48a14%2C14%2C0%2C0%2C0%2C14-14V56A14%2C14%2C0%2C0%2C0%2C104%2C42Zm2%2C62a2%2C2%2C0%2C0%2C1-2%2C2H56a2%2C2%2C0%2C0%2C1-2-2V56a2%2C2%2C0%2C0%2C1%2C2-2h48a2%2C2%2C0%2C0%2C1%2C2%2C2Zm94-62H152a14%2C14%2C0%2C0%2C0-14%2C14v48a14%2C14%2C0%2C0%2C0%2C14%2C14h48a14%2C14%2C0%2C0%2C0%2C14-14V56A14%2C14%2C0%2C0%2C0%2C200%2C42Zm2%2C62a2%2C2%2C0%2C0%2C1-2%2C2H152a2%2C2%2C0%2C0%2C1-2-2V56a2%2C2%2C0%2C0%2C1%2C2-2h48a2%2C2%2C0%2C0%2C1%2C2%2C2Zm-98%2C34H56a14%2C14%2C0%2C0%2C0-14%2C14v48a14%2C14%2C0%2C0%2C0%2C14%2C14h48a14%2C14%2C0%2C0%2C0%2C14-14V152A14%2C14%2C0%2C0%2C0%2C104%2C138Zm2%2C62a2%2C2%2C0%2C0%2C1-2%2C2H56a2%2C2%2C0%2C0%2C1-2-2V152a2%2C2%2C0%2C0%2C1%2C2-2h48a2%2C2%2C0%2C0%2C1%2C2%2C2Zm94-62H152a14%2C14%2C0%2C0%2C0-14%2C14v48a14%2C14%2C0%2C0%2C0%2C14%2C14h48a14%2C14%2C0%2C0%2C0%2C14-14V152A14%2C14%2C0%2C0%2C0%2C200%2C138Zm2%2C62a2%2C2%2C0%2C0%2C1-2%2C2H152a2%2C2%2C0%2C0%2C1-2-2V152a2%2C2%2C0%2C0%2C1%2C2-2h48a2%2C2%2C0%2C0%2C1%2C2%2C2Z%22%2F%3E%3C%2Fsvg%3E");} .ph-x{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M204.24%2C195.76a6%2C6%2C0%2C1%2C1-8.48%2C8.48L128%2C136.49%2C60.24%2C204.24a6%2C6%2C0%2C0%2C1-8.48-8.48L119.51%2C128%2C51.76%2C60.24a6%2C6%2C0%2C0%2C1%2C8.48-8.48L128%2C119.51l67.76-67.75a6%2C6%2C0%2C0%2C1%2C8.48%2C8.48L136.49%2C128Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M204.24%2C195.76a6%2C6%2C0%2C1%2C1-8.48%2C8.48L128%2C136.49%2C60.24%2C204.24a6%2C6%2C0%2C0%2C1-8.48-8.48L119.51%2C128%2C51.76%2C60.24a6%2C6%2C0%2C0%2C1%2C8.48-8.48L128%2C119.51l67.76-67.75a6%2C6%2C0%2C0%2C1%2C8.48%2C8.48L136.49%2C128Z%22%2F%3E%3C%2Fsvg%3E");}