/* Careers pages. Shared by /careers and every /careers/ detail page. Tokens only, never hardcoded hex: the palette comes from brand.css's .style-ivory preset, which MUST be declared on . This file is not hash-stamped by build_web.mjs (it only stamps .js), so bump the ?v= token in every careers HTML file by hand after editing. */ html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: 'Geist', -apple-system, system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--gold); text-decoration: none; } a:hover { text-decoration: underline; } .wrap { max-width: 820px; margin: 0 auto; padding: 40px 28px 96px; } /* header wordmark */ .top { display: flex; align-items: center; gap: 11px; padding-bottom: 56px; } .top img { width: 30px; height: 30px; display: block; } .top .name { font-family: 'Newsreader', serif; font-style: italic; font-size: 22px; color: var(--text); } .overline { display: flex; align-items: center; gap: 14px; font-family: 'Geist', sans-serif; font-weight: 500; font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-dim); margin-bottom: 22px; } .overline::before { content: ""; width: 34px; height: 1px; background: var(--gold); opacity: 0.55; } h1 { font-family: 'Newsreader', serif; font-weight: 400; font-size: clamp(44px, 7.5vw, 70px); line-height: 1.02; letter-spacing: -0.015em; margin: 0 0 24px; color: var(--text); } h1 em { font-style: italic; color: var(--gold); } .lede { font-size: 18px; line-height: 1.62; color: var(--cream-dim); max-width: 640px; margin: 0 0 18px; } .lede.last { margin-bottom: 48px; } /* ---------- status pills ---------- */ .pill { display: inline-block; font-family: 'Geist', sans-serif; font-weight: 500; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; white-space: nowrap; } .pill.open { background: var(--gold); color: #f4f1e9; } .pill.soon { background: var(--sage-soft); color: var(--sage); border: 1px solid rgba(92, 126, 106, 0.32); } .pill.shut { background: rgba(27, 24, 19, 0.05); color: var(--text-muted); border: 1px solid var(--border); } /* ---------- INDEX: clickable role cards ---------- */ .roles { display: flex; flex-direction: column; gap: 16px; margin: 0 0 12px; } a.role-card { display: block; text-decoration: none; color: inherit; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 28px 30px; box-shadow: var(--shadow-card); transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; } a.role-card:hover, a.role-card:focus-visible { text-decoration: none; transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-deep); } a.role-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } a.role-card.muted { background: var(--bg-elev); box-shadow: none; } a.role-card.muted:hover { box-shadow: var(--shadow-card); } .role-card h2 { font-family: 'Newsreader', serif; font-weight: 400; font-size: 32px; line-height: 1.12; letter-spacing: -0.012em; margin: 12px 0 8px; color: var(--text); } .role-card .blurb { font-size: 16px; line-height: 1.6; color: var(--cream-dim); margin: 0 0 18px; max-width: 560px; } .facts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--text-dim); margin: 0; } .facts span { display: inline-flex; align-items: center; gap: 16px; } .facts span + span::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.55; } .go { display: flex; align-items: center; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); font-family: 'Geist', sans-serif; font-weight: 500; font-size: 14px; color: var(--gold); } .go .arrow { transition: transform 0.16s ease; } a.role-card:hover .go .arrow { transform: translateX(4px); } /* ---------- DETAIL pages ---------- */ .back { display: inline-flex; align-items: center; gap: 8px; font-family: 'Geist', sans-serif; font-size: 13.5px; font-weight: 500; color: var(--text-dim); margin-bottom: 30px; } .back:hover { color: var(--gold); text-decoration: none; } .detail-head { margin-bottom: 12px; } .detail-head .pill { margin-bottom: 18px; } .meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--text-dim); margin: 0 0 40px; padding-bottom: 26px; border-bottom: 1px solid var(--border); } .meta span { display: inline-flex; align-items: center; gap: 16px; } .meta span + span::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.55; } .body p { font-size: 16.5px; line-height: 1.7; color: var(--cream-dim); margin: 0 0 18px; max-width: 660px; } .body strong { color: var(--text); font-weight: 600; } .body h3 { font-family: 'Geist', sans-serif; font-weight: 600; font-size: 11.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text); margin: 40px 0 16px; } .body ul { margin: 0; padding: 0; list-style: none; max-width: 660px; } .body li { position: relative; padding-left: 24px; margin-bottom: 14px; font-size: 16.5px; line-height: 1.62; color: var(--cream-dim); } .body li:last-child { margin-bottom: 0; } .body li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); opacity: 0.5; } .straight { border-left: 2px solid var(--gold); padding: 4px 0 4px 24px; margin: 40px 0 0; max-width: 660px; } .straight .lbl { font-family: 'Geist', sans-serif; font-weight: 600; font-size: 11.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin: 0 0 12px; } .straight p:last-child { margin-bottom: 0; } /* apply block */ .apply { margin-top: 48px; padding: 28px 30px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-card); } .apply.muted { background: var(--bg-elev); box-shadow: none; } .apply h3 { margin-top: 0; } .apply p { font-size: 15.5px; line-height: 1.62; color: var(--cream-dim); margin: 0 0 20px; max-width: 560px; } .btn { display: inline-block; background: var(--gold); color: #f4f1e9; font-family: 'Geist', sans-serif; font-weight: 500; font-size: 15px; padding: 14px 26px; border-radius: 999px; white-space: nowrap; } .btn:hover { text-decoration: none; opacity: 0.92; } .btn.ghost { background: transparent; color: var(--gold); border: 1px solid var(--border-strong); } .rule { height: 1px; background: var(--hairline); margin: 56px 0; border: 0; } /* closing */ .closing h2 { font-family: 'Newsreader', serif; font-weight: 400; font-size: 32px; letter-spacing: -0.012em; margin: 0 0 14px; color: var(--text); } .closing p { font-size: 15.5px; line-height: 1.68; color: var(--cream-dim); margin: 0 0 16px; max-width: 640px; } .closing .big { font-family: 'Newsreader', serif; font-size: 27px; margin: 24px 0 8px; } .closing .big a { color: var(--text); } .closing .big a:hover { color: var(--gold); text-decoration: none; } .foot { margin-top: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; font-size: 13px; color: var(--cream-dim); } .foot a { color: var(--cream-dim); } .foot .sep { flex: 1; } .foot .copy { color: var(--cream-dim); opacity: 0.75; } @media (max-width: 620px) { a.role-card { padding: 24px 22px; border-radius: 14px; } .role-card h2 { font-size: 27px; } .apply { padding: 24px 22px; border-radius: 14px; } .btn { width: 100%; text-align: center; } .body p, .body li { font-size: 16px; } }