/* ========================================================================= Free Universalist — v2 stylesheet A conventional layout: masthead with navigation, text hero, section grid, multi-column footer. Serif display (Domitian) over a sans body (Alegreya Sans); both self-hosted from fonts/ under the OFL. Dark mode follows the system preference; there is no script anywhere. ========================================================================= */ @font-face { font-family: "Domitian"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/domitian-regular.woff2") format("woff2"); } @font-face { font-family: "Domitian"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/domitian-italic.woff2") format("woff2"); } @font-face { font-family: "Domitian"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/domitian-bold.woff2") format("woff2"); } @font-face { font-family: "Domitian"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/domitian-bold-italic.woff2") format("woff2"); } @font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/alegreya-sans-regular.woff2") format("woff2"); } @font-face { font-family: "Alegreya Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/alegreya-sans-italic.woff2") format("woff2"); } @font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/alegreya-sans-medium.woff2") format("woff2"); } @font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/alegreya-sans-bold.woff2") format("woff2"); } /* --- Tokens --------------------------------------------------------------- */ :root { color-scheme: light dark; --bg: #FFFFFF; --surface: #F3F5F7; --ink: #1B2530; --ink-soft: #414D58; --muted: #454F58; /* 7:1 on the footer ground */ --accent: #1F4E79; /* deep blue: links, buttons, nav current */ --accent-ink: #FFFFFF; --gold: #66500D; /* article numerals, ornament; 7:1 on surface */ --rule: #D5DCE2; --focus: #C0392B; --wave: #0F4C5C; /* the waters under the dove in the mark */ --serif: "Domitian", "Palatino Linotype", Palatino, Georgia, serif; --sans: "Alegreya Sans", "Gill Sans", "Segoe UI", Verdana, sans-serif; --measure: 66ch; --wide: 70rem; --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.25rem; --s5: 3.5rem; --s6: 5rem; } /* data-theme on : "auto" (the default) follows the system, "dark" and "light" are explicit choices made with the masthead button and remembered in localStorage. The two dark blocks carry identical tokens. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; --bg: #0F161C; --surface: #17212A; --ink: #E6EAEE; --ink-soft: #C2CAD2; --muted: #A3AEB8; --accent: #8CBBE8; --accent-ink: #0F161C; --gold: #D4A63A; --rule: #2A3640; --focus: #F1948A; --wave: #5FB3C6; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0F161C; --surface: #17212A; --ink: #E6EAEE; --ink-soft: #C2CAD2; --muted: #A3AEB8; --accent: #8CBBE8; --accent-ink: #0F161C; --gold: #D4A63A; --rule: #2A3640; --focus: #F1948A; --wave: #5FB3C6; } } @media print { :root { --bg: #fff; --ink: #000; --ink-soft: #222; --muted: #444; --rule: #999; } .site-header, .site-footer, .hero-actions, .pager, .theme-toggle { display: none; } } /* --- Base ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; /* 17px */ line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.15; margin: 0 0 var(--s2); text-wrap: balance; } h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); } h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); } h3 { font-size: 1.3rem; } p, ul, ol, blockquote, dl { margin: 0 0 var(--s2); } a { color: var(--accent); text-underline-offset: .15em; text-decoration-thickness: 1px; } a:hover { text-decoration-thickness: 2px; } a:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } img, svg { display: block; max-width: 100%; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: var(--s2); top: -4rem; background: var(--accent); color: var(--accent-ink); padding: .5rem 1rem; z-index: 10; border-radius: 3px; } .skip:focus { top: var(--s2); } main:focus { outline: none; } .container { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); } .prose { max-width: var(--measure); } .prose p, .prose li { color: var(--ink-soft); } .prose h2 { margin-top: var(--s4); } .prose h3 { margin-top: var(--s3); } .eyebrow { font-family: var(--sans); font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s1); } .lead { font-size: 1.25rem; line-height: 1.5; color: var(--ink-soft); } /* --- Header --------------------------------------------------------------- */ .site-header { border-bottom: 1px solid var(--rule); background: var(--bg); } .site-header .container { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); padding-block: var(--s2); } .brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--ink); } .brand svg { width: 2.5rem; height: auto; } .brand-name { font-family: var(--serif); font-size: 1.35rem; letter-spacing: .01em; } .brand-tag { display: block; font-family: var(--sans); font-size: .8125rem; color: var(--muted); } .site-nav { margin-left: auto; } .theme-toggle { font-family: var(--sans); font-size: 1.5rem; line-height: 1; padding: .25rem .5rem; background: none; border: none; color: var(--muted); cursor: pointer; border-radius: 3px; } .theme-toggle:hover { color: var(--accent); } .site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem var(--s2); } .site-nav a { display: inline-block; padding: .35rem .25rem; color: var(--ink-soft); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; } .site-nav a:hover { color: var(--accent); } .site-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); } @media (max-width: 640px) { .site-nav { margin-left: 0; order: 3; width: 100%; } .theme-toggle { margin-left: auto; } } /* --- Hero ----------------------------------------------------------------- */ .hero { padding-block: var(--s5) var(--s4); } .hero h1 { max-width: 40ch; } .hero .lead { max-width: 60ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); } .button { display: inline-block; font-family: var(--sans); font-weight: 500; text-decoration: none; padding: .6rem 1.2rem; border-radius: 4px; border: 1px solid var(--accent); } .button-primary { background: var(--accent); color: var(--accent-ink); } .button-primary:hover { filter: brightness(1.1); } .button-secondary { color: var(--accent); background: transparent; } .button-secondary:hover { background: var(--surface); } /* --- Section grid --------------------------------------------------------- */ .section { padding-block: var(--s4); } .section-alt { background: var(--surface); } .section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s3); } .section-head h2 { margin: 0; } .section-head a { font-weight: 500; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s3) var(--s4); } .tile { border-top: 2px solid var(--rule); padding-top: var(--s2); } .tile h2 { font-size: 1.3rem; margin-bottom: var(--s1); } .tile p { color: var(--ink-soft); margin-bottom: var(--s1); } .tile a.more { font-weight: 500; } /* Shelves (library) */ .shelves { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .25rem var(--s4); } .shelves li { display: flex; justify-content: space-between; gap: var(--s2); border-bottom: 1px solid var(--rule); padding: .5rem 0; } .shelves .count { color: var(--muted); font-variant-numeric: tabular-nums; } /* Signpost to a separate resource */ .notice { max-width: var(--measure); border: 1px solid var(--rule); border-left: 4px solid var(--accent); background: var(--surface); padding: var(--s2) var(--s3); margin: 0 0 var(--s4); } .notice h2 { font-size: 1.15rem; margin-bottom: .4rem; } .notice p { margin: 0; color: var(--ink-soft); } /* News list */ .news { list-style: none; padding: 0; margin: 0; } .news li { display: grid; grid-template-columns: 8rem 1fr; gap: var(--s2); padding: .6rem 0; border-top: 1px solid var(--rule); } .news time { color: var(--muted); font-variant-numeric: tabular-nums; } @media (max-width: 480px) { .news li { grid-template-columns: 1fr; gap: .1rem; } } /* --- Text page ------------------------------------------------------------ */ .page-head { padding-block: var(--s5) var(--s3); border-bottom: 1px solid var(--rule); margin-bottom: var(--s4); } .page-head h1 { margin-bottom: var(--s1); } .page-head .lead { margin: 0; } /* The Profession, set as a document */ .document { font-family: var(--serif); border: 1px solid var(--rule); background: var(--surface); padding: var(--s3) clamp(1rem, 4vw, 2rem); margin: var(--s3) 0; } .document h2 { text-align: center; font-size: 1.5rem; margin-bottom: var(--s1); } .document .subtitle { text-align: center; font-style: italic; color: var(--muted); font-family: var(--sans); font-size: .95rem; margin-bottom: var(--s3); } .document .article { margin-bottom: var(--s2); } .document .article h3 { font-style: italic; color: var(--gold); font-size: 1.1rem; margin: 0 0 .2rem; } .document .article p { font-size: 1.125rem; line-height: 1.55; margin: 0; color: var(--ink); } .ornament { text-align: center; color: var(--gold); font-size: 1.5rem; letter-spacing: 0; margin: var(--s2) 0 0; line-height: 1; } .provenance { font-family: var(--sans); font-size: .9rem; color: var(--muted); border-left: 3px solid var(--rule); padding: .5rem var(--s2); margin: var(--s3) 0; } .provenance dl { display: grid; grid-template-columns: max-content 1fr; gap: .2rem var(--s2); margin: 0; } .provenance dt { font-weight: 500; } .provenance dd { margin: 0; } @media (max-width: 480px) { .provenance dl { grid-template-columns: 1fr; } } blockquote { border-left: 3px solid var(--gold); margin: var(--s3) 0; padding: .25rem var(--s3); font-family: var(--serif); font-size: 1.15rem; color: var(--ink); } blockquote cite { display: block; font-family: var(--sans); font-style: normal; font-size: .9rem; color: var(--muted); margin-top: .5rem; } .timeline { list-style: none; padding: 0; margin: 0 0 var(--s3); } .timeline li { display: grid; grid-template-columns: 5rem 1fr; gap: var(--s2); padding: .5rem 0; border-top: 1px solid var(--rule); } .sources { font-size: .9375rem; color: var(--ink-soft); padding-left: 1.4rem; } .sources li { margin-bottom: .6rem; } .sources li:target { background: var(--highlight, var(--surface)); } sup a { text-decoration: none; font-family: var(--sans); font-size: .75em; } .timeline .year { font-family: var(--serif); color: var(--gold); font-variant-numeric: tabular-nums; } .pager { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s2); border-top: 1px solid var(--rule); margin-top: var(--s5); padding-top: var(--s2); font-weight: 500; } .pager .next { margin-left: auto; } /* --- LibHUT --------------------------------------------------------------- */ .subnav { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; font-family: var(--sans); font-size: .9375rem; padding: var(--s2) 0; border-bottom: 1px solid var(--rule); color: var(--muted); } .subnav a { color: var(--ink-soft); text-decoration: none; font-weight: 500; padding: .2rem 0; border-bottom: 2px solid transparent; } .subnav a:hover { color: var(--accent); } .subnav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); } .subnav .subnav-home { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); margin-right: .5rem; } .subnav-label { margin-left: .5rem; } .libhut .page-head { padding-top: var(--s4); } .libhut h2 { margin-top: var(--s4); padding-bottom: .25rem; border-bottom: 1px solid var(--rule); } .libhut h2.letter { font-size: 1.6rem; color: var(--accent); } .libhut h3 { font-size: 1.15rem; margin: var(--s3) 0 .25rem; } #q { display: block; width: 100%; max-width: 40rem; font: inherit; padding: .6rem .9rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--bg); color: var(--ink); } #q:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .toc { list-style: none; padding: 0; margin: var(--s2) 0; max-width: 40rem; } .toc a { display: flex; align-items: baseline; gap: .6rem; padding: .35rem 0; text-decoration: none; color: var(--ink); } .toc a:hover .toc-title { color: var(--accent); text-decoration: underline; } .toc-fill { flex: 1; min-width: 2.5rem; border-bottom: 1px dotted var(--rule); } .toc-count { color: var(--muted); font-variant-numeric: tabular-nums; } .booklist { list-style: none; padding: 0; margin: var(--s1) 0 var(--s3); max-width: 60rem; } .booklist li { padding: .45rem 0; border-bottom: 1px solid var(--rule); line-height: 1.5; } .creator { color: var(--muted); font-size: .9375rem; margin-left: .4rem; } .count { color: var(--muted); font-weight: 400; font-size: .9rem; } .crumb { font-family: var(--sans); font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; margin: var(--s4) 0 var(--s1); color: var(--muted); } .crumb a { color: inherit; } .libhut h1 { margin-bottom: .35rem; } .title-long { color: var(--ink-soft); font-size: 1.125rem; line-height: 1.4; margin: 0 0 .5rem; } .byline { font-family: var(--serif); font-style: italic; color: var(--ink-soft); font-size: 1.15rem; margin: 0 0 var(--s2); } .links { font-size: .9375rem; margin: 0 0 var(--s3); } .reader iframe { width: 100%; height: 75vh; border: 1px solid var(--rule); background: #333; } .reader-note { font-size: .9375rem; color: var(--muted); } table.meta th { white-space: nowrap; padding-right: 1.25rem; font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; font-size: .9375rem; } table.meta td { font-size: .9375rem; } @media print { .reader, .subnav { display: none; } } /* --- Footer --------------------------------------------------------------- */ .site-footer { margin-top: var(--s6); border-top: 1px solid var(--rule); background: var(--surface); font-size: .95rem; } .site-footer .container { padding-block: var(--s4) var(--s3); } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s3) var(--s4); } .site-footer h2 { font-family: var(--sans); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s1); } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer li { margin-bottom: .3rem; } .site-footer a { color: var(--ink-soft); } .site-footer p { color: var(--ink-soft); } .footer-bottom { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--rule); color: var(--muted); font-size: .875rem; display: flex; flex-wrap: wrap; gap: .5rem var(--s3); }