/* op-heading-levels-ua */
:where(h2.rt-h3){display:block;font-size:1.17em;margin-block-start:1em;margin-block-end:1em;font-weight:bold}
/* op-heading-levels-ua:end */
/* latin-ext */
@font-face {
  font-family: 'Abril Fatface';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/f0.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;
}
/* latin */
@font-face {
  font-family: 'Abril Fatface';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/f1.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/f2.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/f3.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/f4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/f5.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;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/f6.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/f7.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/f8.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/f9.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/f10.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;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/f11.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/f12.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/f13.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/f14.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/f15.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;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/f16.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/f17.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/f18.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* math */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/f19.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/f20.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* vietnamese */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/f21.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/f22.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;
}
/* latin */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/f23.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/f24.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/f25.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* math */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/f26.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/f27.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* vietnamese */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/f28.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/f29.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;
}
/* latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/f30.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;
}


/* ============================================================
   THRIVE HEALING MASSAGE — “Pressed Leaf” vintage print system
   cream paper · teal ink · mustard accents
   ============================================================ */

:root {
  --paper: #F4EDDA;
  --paper-deep: #EAE0C4;
  --paper-dim: #E3D8B8;
  --ink: #23312D;
  --ink-soft: #4A554F;
  --teal: #1D5C54;
  --teal-deep: #10403A;
  --mustard: #D9A13B;
  --mustard-ink: #9C6E14;
  --rust: #A34A24;
  --rule: #2331304d;
  --display: "Abril Fatface", "Georgia", serif;
  --body: "Lora", "Georgia", serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 23px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--teal); text-decoration-color: var(--mustard); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color 0.15s ease, text-decoration-color 0.15s ease; }
a:hover { color: var(--rust); text-decoration-color: var(--rust); }

::selection { background: var(--mustard); color: var(--teal-deep); }

h1, h2, h3 { font-weight: 400; }

.wrap { max-width: 1220px; margin: 0 auto; padding: 0 28px; }

/* ---------- kickers & small type ---------- */

.kicker {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mustard-ink);
  display: flex;
  align-items: center;
  gap: 14px;
}
.kicker::before { content: ""; width: 34px; height: 2px; background: var(--mustard); flex: none; }
.kicker--center { justify-content: center; }
.kicker--center::after { content: ""; width: 34px; height: 2px; background: var(--mustard); flex: none; }

/* ---------- ticker ---------- */

.ticker {
  background: var(--teal-deep);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 20px;
}
.ticker strong { color: var(--mustard); font-weight: 600; }

/* ---------- masthead ---------- */

.masthead { border-bottom: 2px solid var(--ink); background: var(--paper); }

.masthead-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 34px 28px 22px;
  position: relative;
}

.brand { display: flex; align-items: center; gap: 18px; text-decoration: none; color: var(--ink); }
.wordmark {
  font-family: var(--display);
  font-size: 46px;
  line-height: 1.05;
  color: var(--teal-deep);
  display: inline-flex;
  align-items: baseline;
  gap: 18px;
  margin: 0;
}
.wordmark::before, .wordmark::after { content: "❧"; font-size: 19px; color: var(--mustard-ink); align-self: center; }
.wordmark::before { transform: scaleX(-1); }
.wordmark em { font-style: normal; color: var(--rust); }
.brand:hover .wordmark em { color: var(--mustard-ink); }
.brand-name { font-family: var(--display); font-size: 40px; line-height: 1.05; color: var(--teal-deep); }
.brand-tag { font-family: var(--mono); font-size: 16px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-soft); }

.site-nav {
  border-top: 1px solid var(--ink);
  box-shadow: 0 -4px 0 -1px var(--paper), 0 -5px 0 -1px var(--ink);
  margin-top: 8px;
  width: 100%;
}
.site-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 44px;
  padding: 14px 10px 12px;
}
.site-nav a {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 2px;
  display: inline-block;
}
.site-nav a:hover { color: var(--rust); }
.site-nav a[aria-current="page"] { color: var(--teal); box-shadow: 0 3px 0 var(--mustard); }

.nav-toggle-box { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle { display: none; }

@media (max-width: 860px) {
  .masthead-inner { padding: 24px 20px 18px; }
  .brand-name { font-size: 30px; }
  .wordmark { font-size: 31px; gap: 12px; }
  .wordmark::before, .wordmark::after { font-size: 14px; }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border: 2px solid var(--ink);
    padding: 10px 22px;
    cursor: pointer;
    background: var(--paper-deep);
    box-shadow: 4px 4px 0 var(--mustard);
    margin-top: 6px;
  }
  .nav-toggle::before { content: "☰"; font-size: 18px; }
  .site-nav { display: none; }
  .nav-toggle-box:checked ~ .site-nav { display: block; }
  .site-nav ul { flex-direction: column; align-items: center; gap: 0; padding: 8px 0 14px; }
  .site-nav a { padding: 12px 20px; font-size: 18px; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--teal);
  color: var(--paper);
  border: 2px solid var(--teal-deep);
  padding: 18px 34px;
  box-shadow: 6px 6px 0 var(--mustard);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { color: var(--paper); transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--mustard); }
.btn--ghost { background: transparent; color: var(--teal-deep); border-color: var(--teal-deep); box-shadow: 6px 6px 0 var(--paper-dim); }
.btn--ghost:hover { color: var(--teal-deep); }

/* ---------- hero ---------- */

.hero { border-bottom: 2px solid var(--ink); overflow: hidden; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
  max-width: 1220px;
  margin: 0 auto;
}
.hero-copy { padding: 72px 48px 72px 28px; position: relative; }
.hero-copy h1 {
  font-family: var(--display);
  font-size: clamp(48px, 5.4vw, 78px);
  line-height: 1.06;
  color: var(--teal-deep);
  margin: 22px 0 26px;
}
.hero-copy h1 em { font-style: normal; color: var(--rust); }
.hero-lede { font-size: 25px; max-width: 34ch; margin-bottom: 38px; color: var(--ink-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }

.hero-art { position: relative; border-left: 2px solid var(--ink); min-height: 480px; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

.stamp {
  position: absolute;
  z-index: 2;
  left: -78px;
  bottom: 44px;
  width: 156px;
  height: 156px;
  border-radius: 50%;
  background: var(--mustard);
  color: var(--teal-deep);
  display: grid;
  place-content: center;
  text-align: center;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
  border: 2px dashed var(--teal-deep);
  outline: 6px solid var(--mustard);
  transform: rotate(-8deg);
  padding: 10px;
}

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { padding: 48px 24px 40px; }
  .hero-art { border-left: none; border-top: 2px solid var(--ink); min-height: 340px; }
  .stamp { left: auto; right: 20px; bottom: 20px; }
  .hero-art { margin-bottom: 0; }
}

/* ---------- treatment menu ---------- */

.menu-section { padding: 96px 0 100px; }
.menu-head { text-align: center; margin-bottom: 56px; }
.menu-head h2 { font-family: var(--display); font-size: clamp(40px, 4.4vw, 60px); color: var(--teal-deep); margin-top: 16px; }
.menu-head p { color: var(--ink-soft); max-width: 52ch; margin: 14px auto 0; }

.menu-card {
  border: 2px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 6px;
  background: var(--paper-deep);
  padding: 56px 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 72px;
}
.menu-item { display: grid; grid-template-columns: auto 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px dashed var(--rule); align-items: baseline; }
.menu-item:nth-last-child(-n+2) { border-bottom: none; }
.menu-no { font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--mustard-ink); letter-spacing: 0.1em; padding-top: 6px; }
.menu-item h3 { font-family: var(--display); font-size: 29px; color: var(--teal-deep); line-height: 1.2; }
.menu-item p { font-size: 19px; color: var(--ink-soft); margin-top: 6px; }

@media (max-width: 860px) {
  .menu-card { grid-template-columns: 1fr; padding: 30px 26px; gap: 0; }
  .menu-item:nth-last-child(2) { border-bottom: 1px dashed var(--rule); }
  .menu-section { padding: 64px 0; }
}

/* ---------- house notes tickets ---------- */

.notes-band { background: var(--teal-deep); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 84px 0 90px; }
.notes-band .kicker { color: var(--mustard); }
.notes-band .kicker::before, .notes-band .kicker::after { background: var(--mustard); }
.notes-band h2 { font-family: var(--display); font-size: clamp(36px, 4vw, 54px); color: var(--paper); text-align: center; margin: 14px 0 52px; }
.tickets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.ticket {
  background: var(--paper);
  border: 2px dashed var(--mustard-ink);
  outline: 8px solid var(--paper);
  padding: 34px 30px 36px;
}
.ticket-no { font-family: var(--mono); font-size: 16px; font-weight: 600; letter-spacing: 0.2em; color: var(--rust); text-transform: uppercase; }
.ticket h3 { font-family: var(--display); font-size: 27px; color: var(--teal-deep); margin: 12px 0 12px; }
.ticket p { font-size: 19px; color: var(--ink-soft); }

@media (max-width: 900px) {
  .tickets { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .notes-band { padding: 60px 0; }
}

/* ---------- journal ---------- */

.journal { padding: 96px 0 40px; }
.journal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 30px; border-bottom: 2px solid var(--ink); padding-bottom: 20px; margin-bottom: 0; flex-wrap: wrap; }
.journal-head h2 { font-family: var(--display); font-size: clamp(40px, 4.6vw, 62px); color: var(--teal-deep); }
.journal-head .kicker { margin-bottom: 10px; }
.journal-issue { font-family: var(--mono); font-size: 16px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }

.journal-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
  padding: 46px 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}
.journal-feature figure { border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--paper-dim); }
.journal-feature img { width: 100%; aspect-ratio: 16 / 10.5; object-fit: cover; }
.feature-label { font-family: var(--mono); font-size: 16px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rust); }
.journal-feature h3 { font-family: var(--display); font-size: clamp(30px, 3vw, 42px); line-height: 1.16; margin: 14px 0 16px; }
.journal-feature h3 a { color: var(--teal-deep); text-decoration: none; }
.journal-feature h3 a:hover { color: var(--rust); }
.journal-feature p { font-size: 21px; color: var(--ink-soft); }
.read-on { font-family: var(--mono); font-size: 17px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; display: inline-block; margin-top: 22px; }

.journal-columns { display: grid; grid-template-columns: repeat(3, 1fr); }
.journal-col { padding: 36px 34px 44px; border-right: 1px solid var(--rule); }
.journal-col:first-child { padding-left: 0; }
.journal-col:last-child { border-right: none; padding-right: 0; }
.journal-col h4 {
  font-family: var(--mono); font-size: 17px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--mustard-ink);
  border-bottom: 2px solid var(--mustard); display: inline-block; padding-bottom: 6px; margin-bottom: 10px;
}
.journal-col ul { list-style: none; }
.journal-col li { padding: 20px 0; border-bottom: 1px dotted var(--rule); }
.journal-col li:last-child { border-bottom: none; }
.journal-col a { font-size: 22px; font-weight: 600; line-height: 1.45; color: var(--ink); text-decoration: none; display: block; }
.journal-col a:hover { color: var(--rust); }
.journal-col a::after { content: " ⟶"; color: var(--mustard-ink); font-size: 18px; }
.journal-col li p { font-size: 18px; color: var(--ink-soft); margin-top: 6px; }

@media (max-width: 960px) {
  .journal-feature { grid-template-columns: 1fr; gap: 30px 0; }
  .journal-columns { grid-template-columns: 1fr; }
  .journal-col { border-right: none; border-bottom: 1px solid var(--rule); padding: 30px 0; }
  .journal { padding: 64px 0 20px; }
}

/* ---------- seattle band ---------- */

.seattle-band { margin: 60px 0 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: var(--mustard); }
.seattle-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; padding: 56px 0; }
.seattle-inner h2 { font-family: var(--display); font-size: clamp(32px, 3.6vw, 48px); color: var(--teal-deep); line-height: 1.15; }
.seattle-inner p { color: #5d4408; font-size: 21px; max-width: 56ch; margin-top: 12px; }
.seattle-inner .btn { background: var(--teal-deep); border-color: var(--ink); box-shadow: 6px 6px 0 var(--paper); }
@media (max-width: 860px) {
  .seattle-inner { grid-template-columns: 1fr; padding: 44px 0; }
}

/* ---------- partners directory ---------- */

.directory { padding: 96px 0 110px; background: var(--paper); }
.directory-head { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.directory-head h2 { font-family: var(--display); font-size: clamp(38px, 4.4vw, 58px); color: var(--teal-deep); margin-top: 16px; }
.directory-head p { color: var(--ink-soft); margin-top: 14px; }

.directory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}
.partner-card {
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 30px 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--paper);
  position: relative;
}
.partner-card:nth-child(8n+2), .partner-card:nth-child(8n+4),
.partner-card:nth-child(8n+5), .partner-card:nth-child(8n+7) { background: var(--paper-deep); }
.partner-ad-no {
  font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--mustard-ink);
}
.partner-logo {
  height: 64px;
  background: #FDF9EE;
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
}
.partner-logo img { max-height: 100%; max-width: 92%; width: auto; height: auto; object-fit: contain; }
.partner-name { font-family: var(--body); font-size: 22px; font-weight: 700; line-height: 1.3; }
.partner-name a { color: var(--teal-deep); text-decoration: none; }
.partner-name a:hover { color: var(--rust); }
.partner-desc { font-size: 17px; line-height: 1.6; color: var(--ink-soft); flex: 1; }
.partner-cta {
  font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--rust); text-decoration: none;
  border-bottom: 2px solid var(--mustard); align-self: flex-start; padding-bottom: 2px;
}
.partner-cta:hover { color: var(--teal); }

@media (max-width: 1100px) { .directory-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .directory-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) {
  .directory-grid { grid-template-columns: 1fr; }
  .directory { padding: 64px 0 70px; }
}

/* ---------- footer ---------- */

.site-footer { background: var(--teal-deep); color: var(--paper); border-top: 2px solid var(--ink); }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding: 70px 0 54px; }
.footer-brand .wordmark { font-size: 30px; color: var(--paper); max-width: none; margin-top: 0; }
.footer-brand .wordmark::before, .footer-brand .wordmark::after { content: none; }
.footer-brand .wordmark em { color: var(--mustard); }
.footer-brand p { font-size: 18px; color: #c9d6cf; max-width: 40ch; margin-top: 18px; }
.footer-col h3 { font-family: var(--mono); font-size: 16px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mustard); margin-bottom: 18px; }
.footer-col ul { list-style: none; }
.footer-col li { padding: 7px 0; }
.footer-col a { color: var(--paper); text-decoration: none; font-size: 19px; }
.footer-col a:hover { color: var(--mustard); }
.footer-legal {
  border-top: 1px solid #ffffff2b;
  padding: 22px 0 26px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 30px;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: #b7c6bf;
}
.footer-legal a { color: #b7c6bf; text-decoration: none; }
.footer-legal a:hover { color: var(--mustard); }
.footer-legal ul { list-style: none; display: flex; gap: 26px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .footer-inner { grid-template-columns: 1fr; gap: 34px; padding: 50px 0 40px; }
}

/* ============================================================
   ARTICLE / PAGE SCAFFOLDING
   ============================================================ */

.page-hero { border-bottom: 2px solid var(--ink); background: var(--paper-deep); }
.page-hero-inner { max-width: 900px; margin: 0 auto; padding: 76px 28px 64px; text-align: center; }
.page-hero h1 { font-family: var(--display); font-size: clamp(40px, 5vw, 66px); line-height: 1.1; color: var(--teal-deep); margin-top: 18px; }
.page-hero .page-lede { font-size: 24px; color: var(--ink-soft); max-width: 46ch; margin: 22px auto 0; }

.article-hero { border-bottom: 2px solid var(--ink); background: var(--paper-deep); }
.article-hero-inner { max-width: 980px; margin: 0 auto; padding: 70px 28px 0; text-align: center; }
.article-hero h1 { font-family: var(--display); font-size: clamp(38px, 4.6vw, 62px); line-height: 1.12; color: var(--teal-deep); margin: 18px auto 24px; max-width: 22ch; }
.article-hero .article-standfirst { font-size: 24px; color: var(--ink-soft); max-width: 52ch; margin: 0 auto 46px; }
.article-hero figure { border: 2px solid var(--ink); border-bottom: none; margin: 0 auto; max-width: 980px; }
.article-hero figure img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

.byline-row {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 34px;
  font-family: var(--mono); font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 40px;
}
.byline-row span strong { color: var(--rust); font-weight: 600; }

.prose { max-width: 720px; margin: 0 auto; padding: 72px 28px 40px; }
.prose > * + * { margin-top: 30px; }
.prose p { text-wrap: pretty; }
.prose h2 { font-family: var(--display); font-size: 36px; line-height: 1.2; color: var(--teal-deep); margin-top: 60px; }
.prose h3 { font-size: 27px; font-weight: 700; color: var(--teal-deep); margin-top: 48px; }
.prose .lead { font-size: 26px; line-height: 1.65; }
.prose .lead::first-letter {
  font-family: var(--display);
  font-size: 96px;
  line-height: 0.78;
  float: left;
  padding: 10px 18px 2px 0;
  color: var(--rust);
}
.prose ul, .prose ol { padding-left: 6px; list-style: none; }
.prose ul li, .prose ol li { padding: 12px 0 12px 44px; position: relative; border-bottom: 1px dotted var(--rule); }
.prose ul li:last-child, .prose ol li:last-child { border-bottom: none; }
.prose ul li::before { content: "❧"; position: absolute; left: 4px; top: 12px; color: var(--mustard-ink); font-size: 20px; }
.prose ol { counter-reset: item; }
.prose ol li::before {
  counter-increment: item;
  content: counter(item, decimal-leading-zero);
  position: absolute; left: 0; top: 15px;
  font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--rust);
}

.pullquote {
  border: none;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: 40px 10px;
  margin: 56px 0;
  text-align: center;
}
.pullquote p { font-size: 30px; line-height: 1.45; font-style: italic; color: var(--teal-deep); }
.pullquote p::before { content: "“"; font-family: var(--display); font-style: normal; color: var(--mustard); font-size: 54px; line-height: 0; vertical-align: -14px; margin-right: 8px; }
.pullquote cite { display: block; margin-top: 16px; font-family: var(--mono); font-style: normal; font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mustard-ink); }

.prose figure, .article-body figure.inline-fig { margin: 52px 0; }
.inline-fig { border: 2px solid var(--ink); background: var(--paper-deep); box-shadow: 10px 10px 0 var(--paper-dim); }
.inline-fig img { width: 100%; object-fit: cover; }
.inline-fig figcaption {
  font-family: var(--mono); font-size: 16px; line-height: 1.6; letter-spacing: 0.02em;
  color: var(--ink-soft); padding: 14px 20px; border-top: 1px solid var(--rule);
}
.inline-fig figcaption strong { color: var(--rust); text-transform: uppercase; letter-spacing: 0.14em; font-size: 14px; }

.takeaways {
  background: var(--paper-deep);
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 var(--mustard);
  padding: 36px 38px 30px;
  margin: 56px 0;
}
.takeaways h3 { font-family: var(--mono) !important; font-size: 16px !important; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rust); margin: 0 0 18px !important; }
.takeaways ul { list-style: none; padding: 0; }
.takeaways li { padding: 12px 0 12px 40px; position: relative; border-bottom: 1px dotted var(--rule); font-size: 20px; }
.takeaways li:last-child { border-bottom: none; }
.takeaways li::before { content: "✳"; position: absolute; left: 2px; top: 12px; color: var(--mustard-ink); }

.aside-note {
  border-left: none;
  border: 1px solid var(--rule);
  border-top: 6px solid var(--mustard);
  background: #FBF6E7;
  padding: 26px 30px;
  margin: 48px 0;
  font-size: 20px;
  color: var(--ink-soft);
}
.aside-note strong:first-child { display: block; font-family: var(--mono); font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mustard-ink); margin-bottom: 10px; }

.fact-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 2px solid var(--ink); margin: 56px 0; background: var(--paper-deep);
}
.fact-strip > div { padding: 26px 24px; border-right: 1px solid var(--rule); text-align: center; }
.fact-strip > div:last-child { border-right: none; }
.fact-strip .fact-big { font-family: var(--display); font-size: 40px; color: var(--rust); line-height: 1.1; }
.fact-strip .fact-label { font-family: var(--mono); font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 10px; line-height: 1.5; }
@media (max-width: 720px) {
  .fact-strip { grid-template-columns: 1fr; }
  .fact-strip > div { border-right: none; border-bottom: 1px solid var(--rule); }
  .fact-strip > div:last-child { border-bottom: none; }
}

/* article footer nav */
.article-next { border-top: 2px solid var(--ink); margin-top: 70px; background: var(--paper-deep); }
.article-next-inner { max-width: 980px; margin: 0 auto; padding: 44px 28px 52px; display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.article-next .kicker { margin-bottom: 8px; }
.article-next h3 { font-family: var(--display); font-size: 30px; line-height: 1.25; max-width: 22ch; }
.article-next h3 a { color: var(--teal-deep); text-decoration: none; }
.article-next h3 a:hover { color: var(--rust); }

@media (max-width: 720px) {
  body { font-size: 22px; }
  .prose { padding: 48px 24px 30px; }
  .prose .lead { font-size: 24px; }
  .pullquote p { font-size: 26px; }
  .article-hero-inner, .page-hero-inner { padding-top: 52px; }
}

/* ---------- misc homepage bits ---------- */

.menu-foot { text-align: center; font-family: var(--mono); font-size: 16px; letter-spacing: 0.08em; color: var(--ink-soft); margin-top: 30px; }
.house-ad { border: 2px solid var(--ink); background: var(--mustard); padding: 26px 24px; margin-top: 28px; box-shadow: 8px 8px 0 var(--paper-dim); }
.house-ad p { font-family: var(--mono); font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-deep); line-height: 1.8; }
.house-ad a { color: var(--teal-deep); }

button.btn { cursor: pointer; }
.btn--small { padding: 12px 22px; font-size: 16px; }
.prose-cta { text-align: center; padding: 26px 0 20px; }

/* ---------- about page ---------- */

.values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.value-card { border: 1px solid var(--rule); border-top: 6px solid var(--teal); background: #FBF6E7; padding: 24px 26px 26px; }
.value-card h3 { font-family: var(--display); font-size: 24px; font-weight: 400; color: var(--teal-deep); margin: 0 0 8px; }
.value-card p { font-size: 18px; color: var(--ink-soft); line-height: 1.65; }
@media (max-width: 600px) { .values-grid { grid-template-columns: 1fr; } }

.ledger { border: 2px solid var(--ink); background: #FBF6E7; }
.ledger-row { display: grid; grid-template-columns: 104px 1fr; border-bottom: 1px solid var(--rule); }
.ledger-row:last-child { border-bottom: none; }
.ledger-no { font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--rust); letter-spacing: 0.1em; padding: 30px 0 0 24px; }
.ledger-body { padding: 26px 28px 30px 0; }
.ledger-body h3 { font-family: var(--display); font-size: 26px; font-weight: 400; color: var(--teal-deep); margin: 0 0 8px; }
.ledger-body p { font-size: 20px; color: var(--ink-soft); }
@media (max-width: 640px) {
  .ledger-row { grid-template-columns: 1fr; }
  .ledger-no { padding: 22px 24px 0; }
  .ledger-body { padding: 6px 24px 26px; }
}

/* ---------- contact page ---------- */

.contact-section { max-width: 1120px; margin: 0 auto; padding: 76px 28px 100px; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; }
.contact-main h2 { font-family: var(--display); font-size: 38px; font-weight: 400; color: var(--teal-deep); margin-bottom: 24px; }
.contact-main > p { color: var(--ink-soft); margin-bottom: 22px; }
.booking-form { border: 2px solid var(--ink); background: var(--paper-deep); padding: 42px 38px; box-shadow: 10px 10px 0 var(--paper-dim); margin-top: 34px; display: grid; gap: 26px; }
.form-title { font-family: var(--mono); font-size: 16px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rust); }
.field { display: grid; gap: 8px; }
.field label { font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mustard-ink); }
.field input, .field textarea {
  font-family: var(--body); font-size: 20px; color: var(--ink);
  background: #FDF9EE; border: 1px solid var(--ink); padding: 14px 16px; width: 100%;
}
.field input:focus, .field textarea:focus { outline: 3px solid var(--mustard); outline-offset: 1px; }
.booking-form .btn { justify-self: start; }
.contact-aside { display: flex; flex-direction: column; gap: 32px; }
.aside-card { border: 2px dashed var(--mustard-ink); background: #FBF6E7; padding: 30px 28px 32px; }
.aside-card h3 { font-family: var(--display); font-size: 26px; font-weight: 400; color: var(--teal-deep); margin-bottom: 10px; }
.aside-card p { font-size: 19px; color: var(--ink-soft); }
.aside-card ul { list-style: none; margin-top: 10px; }
.aside-card li { padding: 11px 0; border-bottom: 1px dotted var(--rule); }
.aside-card li:last-child { border-bottom: none; }
.aside-card li a { font-size: 19px; font-weight: 600; line-height: 1.5; text-decoration: none; color: var(--teal); display: block; }
.aside-card li a:hover { color: var(--rust); }
.newsletter-row { display: grid; gap: 14px; margin: 18px 0; }
@media (max-width: 940px) { .contact-section { grid-template-columns: 1fr; gap: 44px; padding-top: 56px; } }

/* ---------- seattle field guide ---------- */

.stops { max-width: 1040px; margin: 0 auto; padding: 20px 28px 60px; }
.stop { display: grid; grid-template-columns: 96px 1fr 360px; gap: 40px; padding: 48px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.stop:last-child { border-bottom: none; }
.stop--flip { grid-template-columns: 96px 360px 1fr; }
.stop--flip .stop-body { order: 3; }
.stop--flip .stop-fig { order: 2; }
.stop-no { font-family: var(--display); font-size: 52px; color: var(--mustard-ink); line-height: 1; padding-top: 4px; }
.stop-tag { font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rust); }
.stop-body h2 { font-family: var(--display); font-size: 33px; font-weight: 400; color: var(--teal-deep); margin: 8px 0 14px; line-height: 1.15; }
.stop-body p { font-size: 21px; color: var(--ink-soft); }
.stop-fig { border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--paper-dim); margin: 0; }
.stop-fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 960px) {
  .stop, .stop--flip { grid-template-columns: 1fr; gap: 18px; padding: 38px 0; }
  .stop--flip .stop-body { order: 0; }
  .stop-no { font-size: 40px; }
  .stop-fig { max-width: 480px; }
}

/* ---------- lesson cards (how-to posts) ---------- */

.lesson { display: grid; grid-template-columns: 88px 1fr; gap: 28px; padding: 44px 0; border-bottom: 1px dashed var(--rule); margin: 0 !important; }
.lesson:last-of-type { border-bottom: none; }
.lesson-no {
  width: 66px; height: 66px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--mustard);
  display: grid; place-content: center;
  font-family: var(--mono); font-size: 18px; font-weight: 600; color: var(--teal-deep);
}
.lesson-body h2 { font-family: var(--display); font-size: 31px; font-weight: 400; color: var(--teal-deep); margin: 6px 0 14px !important; line-height: 1.2; }
.lesson-body p { color: var(--ink); }
.lesson-body p + p { margin-top: 20px; }
.lesson-body .inline-fig { margin: 28px 0 4px; }
@media (max-width: 640px) {
  .lesson { grid-template-columns: 1fr; gap: 14px; padding: 36px 0; }
}

/* ---------- infographic modules ---------- */

.check-cols { columns: 2; column-gap: 48px; margin: 34px 0; padding: 0 !important; list-style: none !important; }
.check-cols li {
  break-inside: avoid; border: none !important; border-bottom: 1px dotted var(--rule) !important;
  padding: 11px 0 11px 36px !important; position: relative; font-size: 20px;
}
.check-cols li::before { content: "✓" !important; position: absolute; left: 2px; top: 11px; color: var(--teal); font-weight: 700; font-size: 20px; }
@media (max-width: 620px) { .check-cols { columns: 1; } }

.chip-grid { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0; padding: 0 !important; list-style: none !important; }
.chip-grid li { border: none !important; padding: 0 !important; }
.chip-grid li::before { content: none !important; }
.chip {
  display: inline-block; border: 2px solid var(--ink); background: var(--paper-deep);
  font-family: var(--mono); font-size: 16px; font-weight: 500; letter-spacing: 0.06em;
  padding: 10px 20px; box-shadow: 3px 3px 0 var(--mustard);
}

/* ---------- trend cards (guide post) ---------- */

.trend-card { display: grid; grid-template-columns: 96px 1fr; margin: 34px 0; border: 2px solid var(--ink); background: #FBF6E7; }
.trend-no {
  display: grid; place-content: center; font-family: var(--display); font-size: 34px;
  color: var(--paper); background: var(--teal); border-right: 2px solid var(--ink); padding: 10px;
}
.trend-card:nth-of-type(even) .trend-no { background: var(--mustard); color: var(--teal-deep); }
.trend-body { padding: 28px 30px 30px; }
.trend-body h2 { font-family: var(--display); font-size: 29px; font-weight: 400; color: var(--teal-deep); margin: 0 0 12px !important; }
.trend-body p { font-size: 20px; }
.trend-body p + p { margin-top: 18px; }
.trend-body .inline-fig { margin: 22px 0 4px; }
@media (max-width: 620px) {
  .trend-card { grid-template-columns: 1fr; }
  .trend-no { border-right: none; border-bottom: 2px solid var(--ink); padding: 14px; }
}

/* ---------- technique recipe cards ---------- */

.tech-grid { max-width: 1120px; margin: 0 auto; padding: 10px 28px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.tech-card { border: 2px solid var(--ink); background: #FBF6EA; box-shadow: 8px 8px 0 var(--paper-dim); display: flex; flex-direction: column; }
.tech-card figure { margin: 0; border-bottom: 2px solid var(--ink); }
.tech-card figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tech-head { display: flex; align-items: baseline; gap: 16px; padding: 22px 28px 0; }
.tech-head .tech-no { font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--rust); letter-spacing: 0.12em; }
.tech-head h2 { font-family: var(--display); font-size: 30px; font-weight: 400; color: var(--teal-deep); line-height: 1.15; }
.tech-card > p { padding: 14px 28px 30px; font-size: 20px; line-height: 1.65; color: var(--ink); }
@media (max-width: 880px) { .tech-grid { grid-template-columns: 1fr; } }

/* ---------- ailment index (mental wellness post) ---------- */

.fact-strip--solo { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
.index-item { padding: 36px 0 34px; border-bottom: 1px solid var(--rule); margin: 0 !important; }
.index-item:last-of-type { border-bottom: none; }
.index-item h2 { display: flex; align-items: baseline; gap: 18px; font-family: var(--display); font-size: 30px; font-weight: 400; color: var(--teal-deep); margin: 0 0 14px !important; }
.index-item h2 .idx { font-family: var(--mono); font-size: 16px; font-weight: 600; letter-spacing: 0.1em; color: var(--rust); flex: none; }
.index-item p { color: var(--ink); }
.epigraph { text-align: center; font-style: italic; font-size: 27px; line-height: 1.5; color: var(--teal-deep); max-width: 26ch; margin: 0 auto 40px; }
.epigraph::before { content: "❦"; display: block; font-style: normal; color: var(--mustard); font-size: 30px; margin-bottom: 14px; }

/* ---------- tool shelf (tools post) ---------- */

.tool-grid { max-width: 1120px; margin: 0 auto; padding: 10px 28px 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.tool-card { border: 1px solid var(--ink); background: #FBF6EA; padding: 24px 26px 28px; position: relative; }
.tool-card::before { content: ""; position: absolute; inset: 6px; border: 1px dashed var(--rule); pointer-events: none; }
.tool-card figure { margin: 0 0 18px; border: 1px solid var(--rule); }
.tool-card figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tool-no { font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rust); }
.tool-card h2 { font-family: var(--display); font-size: 26px; font-weight: 400; color: var(--teal-deep); margin: 6px 0 10px; line-height: 1.2; }
.tool-card p { font-size: 18px; line-height: 1.65; color: var(--ink-soft); }
@media (max-width: 980px) { .tool-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .tool-grid { grid-template-columns: 1fr; } }

/* ---------- legal pages ---------- */

.prose--legal { max-width: 680px; }
.prose--legal h2 { font-size: 30px; }
.prose--legal p { font-size: 20px; color: var(--ink-soft); }

/* ============================================================
   POLISH LAYER — focus, motion, small-screen refinements
   ============================================================ */

h1, h2, h3 { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }

a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--mustard);
  outline-offset: 3px;
}
input:focus-visible, textarea:focus-visible { outline: 3px solid var(--mustard); outline-offset: 1px; }
.nav-toggle-box:focus-visible ~ .nav-toggle { outline: 3px solid var(--mustard); outline-offset: 3px; }

.journal-feature figure { overflow: hidden; }
.journal-feature figure img { transition: transform 0.5s ease; }
.journal-feature figure a:hover img, .journal-feature figure a:focus-visible img { transform: scale(1.03); }

.partner-card { transition: box-shadow 0.18s ease; }
.partner-card:hover { box-shadow: inset 0 0 0 2px var(--mustard); }

@media (max-width: 430px) {
  body { font-size: 20px; }
  .ticker { font-size: 12px; letter-spacing: 0.1em; padding: 9px 14px; }
  .masthead-inner { padding: 22px 16px 14px; }
  .wordmark { font-size: 26px; gap: 10px; }
  .wordmark::before, .wordmark::after { font-size: 12px; }
  .brand-tag { font-size: 13px; letter-spacing: 0.22em; text-align: center; }
  .kicker { font-size: 13px; letter-spacing: 0.16em; gap: 10px; }
  .kicker::before, .kicker--center::after { width: 24px; }
  .hero-copy { padding: 40px 20px 36px; }
  .hero-copy h1 { font-size: 42px; }
  .hero-lede { font-size: 21px; margin-bottom: 30px; }
  .hero-actions { gap: 14px; }
  .btn { padding: 15px 26px; font-size: 16px; }
  .stamp { width: 116px; height: 116px; font-size: 11px; outline-width: 4px; right: 14px; }
  .menu-section { padding: 52px 0; }
  .menu-card { padding: 24px 18px; }
  .menu-item { gap: 14px; }
  .menu-item h3 { font-size: 24px; }
  .menu-head h2, .notes-band h2, .directory-head h2, .journal-head h2 { font-size: 33px; }
  .ticket { padding: 26px 22px 28px; outline-width: 6px; }
  .journal-feature h3 { font-size: 27px; }
  .journal-col a { font-size: 20px; }
  .seattle-inner h2 { font-size: 29px; }
  .article-hero-inner, .page-hero-inner { padding: 44px 20px 0; }
  .page-hero-inner { padding-bottom: 44px; }
  .article-hero h1, .page-hero h1 { font-size: 32px; }
  .article-hero .article-standfirst, .page-hero .page-lede { font-size: 20px; }
  .article-hero .article-standfirst { margin-bottom: 34px; }
  .byline-row { font-size: 13px; gap: 4px 18px; margin-bottom: 30px; }
  .prose { padding: 40px 20px 24px; }
  .prose > * + * { margin-top: 24px; }
  .prose h2 { font-size: 28px; margin-top: 44px; }
  .prose .lead { font-size: 22px; }
  .prose .lead::first-letter { font-size: 74px; padding-right: 14px; }
  .pullquote { padding: 28px 4px; margin: 40px 0; }
  .pullquote p { font-size: 22px; }
  .takeaways { padding: 26px 20px 22px; box-shadow: 6px 6px 0 var(--mustard); }
  .aside-note { padding: 20px; }
  .fact-strip .fact-big { font-size: 30px; }
  .inline-fig figcaption { font-size: 14px; padding: 12px 16px; }
  .lesson-no { width: 54px; height: 54px; font-size: 16px; }
  .trend-body { padding: 20px 18px 22px; }
  .tech-head { padding: 18px 20px 0; }
  .tech-card > p { padding: 12px 20px 24px; font-size: 19px; }
  .tool-card { padding: 20px 18px 22px; }
  .stop-no { font-size: 34px; }
  .stop-body h2 { font-size: 27px; }
  .contact-section { padding: 40px 20px 56px; }
  .booking-form { padding: 26px 20px; box-shadow: 6px 6px 0 var(--paper-dim); }
  .footer-inner { padding: 40px 0 28px; }
  .footer-brand .wordmark { font-size: 25px; }
  .article-next-inner { padding: 34px 20px 40px; }
  .article-next h3 { font-size: 25px; }
}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain}

/* sp-contain-guard: sponsor logos are wordmarks — never object-fit:cover (crops).
   object-fit ONLY. This block used to also set width:auto, padding:4px 10px,
   max-width:calc(100% - 20px) and min/max-height, which overrode Design's own frame and
   let every plate shrink-wrap its logo — the recurring "inconsistent sizing" and
   "lacks padding". Geometry belongs to Design. */
.sponsor img,.sponsor-box img,.sp-logo img{object-fit:contain!important;display:block;margin-left:auto;margin-right:auto;align-self:center}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
.partner-card > .sponsor{flex:0 0 auto!important}
.partner-logo{flex-wrap:wrap!important}
.partner-logo > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-blurb-stack: a slot holding BOTH a mark and our copy stacks them —
   a fixed-height row clips the mark once the copy is un-hidden. */
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)){flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;height:auto!important;min-height:0!important;overflow:visible!important;gap:8px}
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)) > img{align-self:flex-start}

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-blurb-size: the design never sized .sponsor-blurb, so it inherited body copy.
   Relative, so it still follows the design's scale. */
.sponsor .sponsor-blurb{font-size:.8em;line-height:1.45}
.sponsor .sp-brand{font-weight:700}

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
.sponsor.sponsor{justify-content:center!important}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name):not(.sponsor-box):not(.sp-logo):not(.sponsor__logo){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}
/* the mobile un-clamp is retired: the operator asked for "2-3 rows max" on phones, which is
   what the desktop rule above already does — so mobile simply keeps it. */
@media (max-width:640px){.sponsor.sponsor .sponsor-blurb{-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}}

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* sp-text-contrast: sponsor copy measured against its OWN ground as a WCAG contrast RATIO, not as a
   luminance subtraction. The subtraction passed capitanalatriste's blurbs at a 75-point gap
   while they sat at 2.8:1 and could not be read. Bar is 4.5:1 for body copy, 3:1 for large or
   bold; opacity is folded in, because it compounds down the tree and computed colour ignores
   it. The lift keeps Design's hue and saturation and moves lightness only, by the smallest
   step that clears the bar, so a warm blurb on near-black stays warm. Colour only — size,
   weight, family and spacing are exactly as delivered. */
.partner-ad-no.partner-ad-no{color:rgb(131,92,17)!important;opacity:1!important}
.partner-cta.partner-cta{color:rgb(159,72,35)!important;opacity:1!important}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.directory-grid .partner-card .partner-logo.partner-logo{background:#121013!important;padding:8px 12px!important;box-sizing:border-box!important;height:39px!important;width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important}
.directory-grid .partner-card .partner-logo.partner-logo img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important;margin:0!important;padding:0!important;background:transparent!important;display:block!important;max-width:none!important;max-height:none!important}
.directory-grid .partner-card .partner-logo.partner-logo{display:block!important;width:100%!important}

/* op-marks-bigger: operator: the logos seem kind of small. Measured 208x21 of artwork inside a
   39px plate — the plate height came from sp-mark-frame, sized before this band went to four
   columns. Plate 64px, which gives the artwork ~40px inside the same 8px/12px inset. The selector
   matches sp-mark-frame's own (.partner-logo.partner-logo) or nothing changes. */
/* ⚠️ sp-mark-frame's selector here is FOUR classes —
   .directory-grid .partner-card .partner-logo.partner-logo — so three did not win
   and the plate stayed 39px. Matched. */
.directory-grid .partner-card .partner-logo.partner-logo{height:64px!important}

/* op-wrap-gutter: these elements carry the build's own gutter class but their own
   rule sets a padding SHORTHAND, which resets left/right to 0 — every line of type
   then sits against the screen edge at phone width. Design's own token is restated
   for the inline axis, on the exact element that lost it. Measured, not guessed:
   each selector below had TEXT within 2px of a viewport edge at 390. */
@media (max-width:900px){
  .wrap.seattle-inner{padding-inline:28px}
}

/* op-footer-compact: the footer printed 9 rows for 9 link(s) in
   2 list(s) — 979px at 390, 7% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too,
   measured 979 -> 851px (13% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:26px!important;row-gap:4px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   3863px at 390, 28% of the whole page. Two columns bring it to
   2717px (30% shorter). Checked before writing: no new overflow, smallest mark still
   74px wide, longest blurb 5 lines, tile heights 419-476px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. Only the tier(s) that were one-per-row are touched (.directory-grid), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .directory-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:20px!important}
    .directory-grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .directory-grid > * *{min-width:0!important;max-width:100%}
    .directory-grid img,.directory-grid svg{max-width:100%;height:auto}
  .directory-grid .partner-desc{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-blurb-rows: money blurbs ran to 5 rows at 390, 2717px of tier across
   12 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .directory-grid .partner-desc{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:81px!important;min-height:0!important;overflow:hidden!important}
}

/* op-page-overflow: the page scrolled sideways at 320 — a.brand reached
   326px in a 320px screen (+5px), inside
   div.masthead-inner. Remedy: let the words break. Structural only, no spacing value of mine;
   tried in order and this is the first that held, with the page's visible copy unchanged.
   Phone widths only — desktop is re-measured after writing and must not move. */
@media (max-width:360px){
  a.brand,a.brand *{overflow-wrap:anywhere!important;min-width:0!important}
}
/* op-heading-levels */
h2:where(.rt-h3){font-weight: 400;}
.footer-col h2:where(.rt-h3){font-family: var(--mono); font-size: 16px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mustard); margin-bottom: 18px;}
.prose h2:where(.rt-h3){font-size: 27px; font-weight: 700; color: var(--teal-deep); margin-top: 48px;}
.takeaways h2:where(.rt-h3){font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rust); font-family: var(--mono) !important; font-size: 16px !important; margin: 0px 0px 18px !important;}
.article-next h2:where(.rt-h3){font-family: var(--display); font-size: 30px; line-height: 1.25; max-width: 22ch;}
.article-next h2:where(.rt-h3) a{color: var(--teal-deep); text-decoration: none;}
.article-next h2:where(.rt-h3) a:hover{color: var(--rust);}
h2:where(.rt-h3){text-wrap: balance;}
@media (max-width: 430px){.article-next h2:where(.rt-h3){font-size: 25px;}}
h2.rt-h3.rt-h3{line-height:27.2px}
/* op-heading-levels:end */

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:901px) and (max-width:1299px){
  div.wrap.seattle-inner{padding-left:max(24px, 18px);padding-right:max(24px, 18px)}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.prose > figure.inline-fig > img,
  article.tool-card > figure > img,
  div.article-hero-inner > figure > img,
  div.hero-grid > div.hero-art > img,
  div.lesson-body > figure.inline-fig > img,
  div.trend-body > figure.inline-fig > img,
  figure > a > img,
  section.stop > figure.stop-fig > img,
  section.stop.stop--flip > figure.stop-fig > img,
  section.tech-card > figure > img){height:auto}
/* op-img-dims:end */