/* ======================================================================== hare.quest — stylesheet Light is default. Dark applies when (toggled via logo click in hare.js) OR when the user has prefers-color-scheme: dark AND no explicit choice has been saved. ======================================================================== */ /* Fonts (self-hosted) ------------------------------------------------- */ @font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/InstrumentSerif-Regular.woff2') format('woff2'); } @font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/InstrumentSerif-Italic.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/Inter_24pt-Regular.woff2') format('woff2'); } :root { color-scheme: light dark; --ink: #111111; --ink-2: #3a3a3a; --ink-3: #6b6b6b; --paper: #faf8f4; --rule: #d9d6ce; } /* Explicit dark choice from logo-toggle */ html[data-theme="dark"] { --ink: #f0ede6; --ink-2: #c9c6bf; --ink-3: #8a8680; --paper: #111111; --rule: #2a2a2a; } /* Auto-dark when the user has not made an explicit choice */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { --ink: #f0ede6; --ink-2: #c9c6bf; --ink-3: #8a8680; --paper: #111111; --rule: #2a2a2a; } } /* Reset / base -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); } html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-family: 'Inter', -apple-system, system-ui, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.6; letter-spacing: 0.005em; /* Only Regular Inter is shipped; don't synthesize a fake bold/italic if something asks for a weight we don't have. */ font-synthesis: none; } /* Typography ---------------------------------------------------------- */ h1, h2, h3 { margin: 0; font-weight: 400; letter-spacing: -0.01em; } h1 { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(44px, 6.8vw, 84px); line-height: 1.05; letter-spacing: -0.015em; } h1 em { font-style: italic; font-weight: 400; } h2 { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; } h3 { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 1px; transition: color 160ms ease, border-color 160ms ease; } a:hover { color: var(--ink-3); border-color: var(--ink-3); } a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; } /* Layout -------------------------------------------------------------- */ .page { max-width: 900px; margin: 0 auto; /* Padding flexes with the viewport so we don't need a mobile-only override for sizing (the @media block below handles layout changes only — grid collapse, footer stacking). */ padding: clamp(36px, 6vw, 56px) clamp(20px, 5vw, 32px) clamp(60px, 8vw, 80px); } /* Masthead ------------------------------------------------------------ */ header.masthead { display: flex; justify-content: center; padding-bottom: 64px; } .brand { display: inline-flex; align-items: center; gap: clamp(10px, 2vw, 16px); background: transparent; border: none; padding: 0; margin: 0; cursor: pointer; color: inherit; font: inherit; } .brand:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; } .brand .mark { /* 67px on desktop (≈40% larger than the old 48px), shrinking to 48px on narrow screens. */ --mark-size: clamp(48px, 12vw, 67px); width: var(--mark-size); height: var(--mark-size); flex: 0 0 var(--mark-size); color: var(--ink); transition: transform 200ms ease; } .brand .mark svg { width: 100%; height: 100%; display: block; fill: currentColor; } .brand:hover .mark { transform: rotate(-4deg); } .brand .wordmark { font-family: 'Instrument Serif', Georgia, serif; /* 42px on desktop (150% of old 28px), shrinking to 28px at the low end. */ font-size: clamp(28px, 7.5vw, 42px); font-weight: 400; letter-spacing: -0.005em; line-height: 1; color: var(--ink); } /* Hero ---------------------------------------------------------------- */ .hero { padding: 16px 0 48px; } .hero .lede { margin-top: 28px; font-size: 17px; color: var(--ink-2); max-width: 52ch; line-height: 1.6; } /* Sections ------------------------------------------------------------ */ section.block { padding: 48px 0; border-top: 1px solid var(--rule); } section.block h2 { margin-bottom: 20px; } /* Services list ------------------------------------------------------- */ .services { list-style: none; padding: 0; margin: 0; } .services li { display: grid; grid-template-columns: 185px 1fr; gap: 28px; padding: 18px 0; border-bottom: 1px solid var(--rule); } .services li:last-child { border-bottom: none; } .services .k { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 19px; color: var(--ink-2); } .services .v { color: var(--ink-2); } /* About --------------------------------------------------------------- */ .about p { color: var(--ink-2); } /* Contact ------------------------------------------------------------- */ .contact .line { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 10px 0; border-bottom: 1px solid var(--rule); } .contact .line:last-child { border-bottom: none; } .contact .line .k { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; color: var(--ink-3); font-size: 17px; } .contact .line .v { color: var(--ink-2); } /* Footer -------------------------------------------------------------- */ footer.foot { margin-top: 80px; padding-top: 22px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 18px; font-size: 13px; color: var(--ink-3); } footer.foot a { border: none; color: var(--ink-3); } footer.foot a:hover { color: var(--ink); } /* Responsive (layout restructures only — sizing is handled by clamp() ) */ @media (max-width: 560px) { header.masthead { padding-bottom: 40px; } .services li { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; } .services .k { font-size: 15px; } footer.foot { flex-direction: column; gap: 8px; } } /* Reduced motion ------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } .brand:hover .mark { transform: none; } } /* Print --------------------------------------------------------------- */ @media print { html, body { background: #fff; color: #000; } .brand .mark { display: none; } a { border-bottom: none; } }