/* ============================================================ CIRCULAR LAMPUNG — editorial design system Genco × Elevated Elements · 2026 Type: Newsreader (display) + Inter (text) · self-hosted Themes: 3 light · 2 neutral · 2 dark (see ) Customizer: data-size / data-leading / data-pad ============================================================ */ @import url('fonts.css'); /* ------------------------------------------------------------ 1 · Themes ------------------------------------------------------------ */ :root, :root[data-theme="paper"] { color-scheme: light; --paper: #faf8f3; --paper-deep: #f3efe6; --surface: #fffefb; --surface-2: #f4f0e7; --row-alt: #faf8f2; --ink: #211d16; --ink-2: #4a4437; --muted: #6e6754; --faint: #a79d89; --rule: #e5dfd1; --rule-strong: #c9c0ac; --accent: #0e7a6a; --accent-deep: #0a5a4e; --accent-wash: #e9f3ef; --amber: #85600a; --amber-wash: #f8f0dc; --red: #a03a2c; --red-wash: #f9ebe7; --topbar-bg: rgba(250, 248, 243, 0.94); } :root[data-theme="mist"] { color-scheme: light; --paper: #f5f7fa; --paper-deep: #eceff5; --surface: #ffffff; --surface-2: #eff2f7; --row-alt: #f7f9fc; --ink: #1a2330; --ink-2: #3c4a5c; --muted: #54636f; --faint: #93a1b0; --rule: #dfe5ec; --rule-strong: #bcc7d4; --accent: #3556c9; --accent-deep: #2a44a5; --accent-wash: #e8edfb; --amber: #855705; --amber-wash: #f6eeda; --red: #a5372a; --red-wash: #f9ebe8; --topbar-bg: rgba(245, 247, 250, 0.94); } :root[data-theme="sand"] { color-scheme: light; --paper: #faf5ec; --paper-deep: #f2ebdd; --surface: #fffdf7; --surface-2: #f5efe3; --row-alt: #faf6ec; --ink: #272116; --ink-2: #4d4433; --muted: #70634e; --faint: #ab9d83; --rule: #e7ddc9; --rule-strong: #cbbfa4; --accent: #b04a24; --accent-deep: #93391a; --accent-wash: #f9e8df; --amber: #7f5203; --amber-wash: #f5ecd7; --red: #a63a2a; --red-wash: #f9eae5; --topbar-bg: rgba(250, 245, 236, 0.94); } :root[data-theme="slate"] { color-scheme: light; --paper: #eceef0; --paper-deep: #e2e5e8; --surface: #f7f8f9; --surface-2: #e9ebee; --row-alt: #f1f3f5; --ink: #22272d; --ink-2: #414b54; --muted: #4f5a63; --faint: #8a949d; --rule: #d6dbe0; --rule-strong: #b4bcc4; --accent: #0d6d64; --accent-deep: #095750; --accent-wash: #e0ece9; --amber: #79590a; --amber-wash: #efe9d4; --red: #9d3d31; --red-wash: #f5e9e5; --topbar-bg: rgba(236, 238, 240, 0.94); } :root[data-theme="stone"] { color-scheme: light; --paper: #edeae3; --paper-deep: #e3dfd6; --surface: #f6f4ee; --surface-2: #eae7de; --row-alt: #f1efe8; --ink: #26231b; --ink-2: #474434; --muted: #5c584a; --faint: #918d7c; --rule: #dcd7ca; --rule-strong: #bcb5a2; --accent: #47763a; --accent-deep: #38602d; --accent-wash: #e7eedd; --amber: #7a5704; --amber-wash: #f0e8d0; --red: #9d3a2b; --red-wash: #f4e8e3; --topbar-bg: rgba(237, 234, 227, 0.94); } :root[data-theme="ink"] { color-scheme: dark; --paper: #16140f; --paper-deep: #1c1a14; --surface: #201e17; --surface-2: #26231b; --row-alt: #1a1811; --ink: #ece7da; --ink-2: #cdc6b3; --muted: #a29b86; --faint: #726c5c; --rule: #2d2a21; --rule-strong: #443f31; --accent: #45c4a6; --accent-deep: #74d8bd; --accent-wash: #1d2b26; --amber: #d2a356; --amber-wash: #292215; --red: #e08575; --red-wash: #2d1a16; --topbar-bg: rgba(22, 20, 15, 0.92); } :root[data-theme="forest"] { color-scheme: dark; --paper: #0f1713; --paper-deep: #141d18; --surface: #182219; --surface-2: #1d2920; --row-alt: #121b16; --ink: #e6ecdc; --ink-2: #c3cfb6; --muted: #97a88e; --faint: #6a7a63; --rule: #233129; --rule-strong: #3a4c40; --accent: #5fd08d; --accent-deep: #8addab; --accent-wash: #18271e; --amber: #d4aa58; --amber-wash: #282012; --red: #e28a7a; --red-wash: #2c1913; --topbar-bg: rgba(15, 23, 19, 0.92); } /* ------------------------------------------------------------ 2 · Customizer variables (size / leading / padding) ------------------------------------------------------------ */ :root { --pad-x: clamp(20px, 5vw, 64px); --leading: 1.7; } :root[data-size="s"] { font-size: 93.75%; } :root[data-size="m"] { font-size: 100%; } :root[data-size="l"] { font-size: 112.5%; } :root[data-leading="compact"] { --leading: 1.55; } :root[data-leading="normal"] { --leading: 1.7; } :root[data-leading="relaxed"] { --leading: 1.85; } :root[data-pad="narrow"] { --pad-x: clamp(14px, 3.5vw, 40px); } :root[data-pad="normal"] { --pad-x: clamp(20px, 5vw, 64px); } :root[data-pad="wide"] { --pad-x: clamp(28px, 7vw, 96px); } /* ------------------------------------------------------------ 3 · Base ------------------------------------------------------------ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Inter', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 1rem; line-height: var(--leading); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: 'liga' 1, 'kern' 1; } ::selection { background: var(--accent-wash); color: var(--accent-deep); } a { color: var(--accent-deep); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; } a:hover { text-decoration-color: currentColor; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 18px; font-size: 0.85rem; } .skip:focus { left: 0; } /* ------------------------------------------------------------ 4 · Shell & navigation ------------------------------------------------------------ */ .shell { display: flex; min-height: 100vh; } .sidebar { width: 258px; flex-shrink: 0; background: var(--paper-deep); border-right: 1px solid var(--rule); padding: 26px 18px 34px; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; scrollbar-width: thin; } .brand { padding: 0 12px 20px; border-bottom: 1px solid var(--rule-strong); margin-bottom: 8px; } .brand-name { font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif; font-size: 1.32rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; } .brand-name a { color: var(--ink); text-decoration: none; } .brand-sub { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 6px; } .nav-group { margin: 22px 0 4px; padding: 0 12px; } .nav-group-label { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .nav-link { display: block; padding: 7px 12px; margin: 0 -12px; color: var(--ink-2); font-size: 0.9rem; text-decoration: none; } .nav-link:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 4px; } .nav-link.active { color: var(--accent-deep); font-weight: 600; } .nav-link.active::before { content: '— '; color: var(--accent); } .sidebar-footer { margin-top: 30px; padding: 14px 12px 0; border-top: 1px solid var(--rule-strong); font-size: 0.74rem; line-height: 1.7; color: var(--muted); } .sidebar-footer strong { color: var(--ink-2); } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; scroll-margin-top: 64px; } .content { width: 100%; max-width: 1120px; margin: 0 auto; padding: clamp(30px, 5vw, 68px) var(--pad-x) 96px; } /* Mobile topbar */ .topbar { display: none; position: sticky; top: 0; z-index: 60; background: var(--topbar-bg); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); border-bottom: 1px solid var(--rule-strong); padding: 10px 16px; align-items: center; gap: 12px; } .topbar-title { font-family: 'Newsreader', Georgia, serif; font-weight: 600; font-size: 1.05rem; flex: 1; letter-spacing: -0.01em; } .nav-toggle { border: 1px solid var(--rule-strong); background: var(--surface); width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; color: var(--ink); border-radius: 2px; } .nav-toggle svg { display: block; } @media (max-width: 999px) { .sidebar { position: fixed; left: 0; z-index: 70; transform: translateX(-105%); visibility: hidden; transition: transform 0.25s ease, visibility 0.25s; box-shadow: 0 0 80px rgba(0, 0, 0, 0.35); } .sidebar.open { transform: translateX(0); visibility: visible; } .topbar { display: flex; } .scrim { position: fixed; inset: 0; background: rgba(10, 10, 8, 0.4); z-index: 65; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .scrim.show { opacity: 1; pointer-events: auto; } } /* ------------------------------------------------------------ 5 · Page header ------------------------------------------------------------ */ .page-header { margin-bottom: clamp(30px, 4vw, 48px); } .kicker { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-deep); margin: 0 0 14px; } .kicker .sep { color: var(--faint); padding: 0 6px; } h1 { font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif; font-size: clamp(2rem, 4.2vw, 2.9rem); font-weight: 550; line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 18px; max-width: 24ch; } .lede { font-family: 'Newsreader', Georgia, serif; font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.5; color: var(--ink-2); max-width: 58ch; margin: 0 0 20px; } .meta-line { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); padding: 9px 0; display: flex; flex-wrap: wrap; gap: 6px 0; } .meta-line .m { display: inline-flex; align-items: center; } .meta-line .m + .m::before { content: '·'; margin: 0 12px; color: var(--faint); } .meta-line .live { color: var(--red); font-weight: 600; } .meta-line .pending { color: var(--amber); font-weight: 600; } /* ------------------------------------------------------------ 6 · Sections — traditional single-line heads ------------------------------------------------------------ */ .sec { margin-top: clamp(40px, 5vw, 60px); } .sec-head { border-top: 2px solid var(--ink); padding-top: 12px; margin-bottom: 18px; } h2 { font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif; font-size: clamp(1.4rem, 2.4vw, 1.75rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; margin: 0; } .sec-num { font: inherit; font-weight: 500; color: var(--accent-deep); margin-right: 10px; } h3 { font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif; font-size: 1.18rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.3; margin: 2em 0 0.5em; } /* ------------------------------------------------------------ 7 · Prose ------------------------------------------------------------ */ .prose p, .content > p { max-width: 66ch; } .content p { margin: 0 0 1.1em; } .prose { font-size: 1.02rem; } .statement { font-family: 'Newsreader', Georgia, serif; font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-style: italic; line-height: 1.45; color: var(--ink); max-width: 34ch; margin: 2.4em auto 2.4em 0; padding: 1.6em 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); } .statement .statement-src { display: block; margin-top: 10px; font-family: 'Inter', ui-sans-serif, sans-serif; font-style: normal; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* numbered editorial list */ ol.ed { list-style: none; counter-reset: ed; padding: 0; margin: 1.4em 0; max-width: 66ch; } ol.ed > li { counter-increment: ed; position: relative; padding: 14px 0 14px 56px; border-top: 1px solid var(--rule); margin: 0; } ol.ed > li:last-child { border-bottom: 1px solid var(--rule); } ol.ed > li::before { content: counter(ed); position: absolute; left: 0; top: 16px; font-family: 'Newsreader', Georgia, serif; font-size: 1.15rem; color: var(--accent-deep); } ol.ed > li .ed-title { font-weight: 600; display: block; margin-bottom: 2px; } ol.ed > li p { margin: 0; } ul.plain { padding-left: 1.3em; max-width: 66ch; } ul.plain li { margin: 0.4em 0; } ul.plain li::marker { color: var(--accent); } /* run-in definition paragraphs */ p.def { max-width: 66ch; } p.def .def-term { font-weight: 650; } /* ------------------------------------------------------------ 8 · Inline data-gap marker ------------------------------------------------------------ */ .gap { font-style: normal; color: var(--amber); background: var(--amber-wash); padding: 0 6px; margin: 0 1px; border-radius: 2px; font-size: 0.92em; white-space: normal; } /* ------------------------------------------------------------ 9 · Notes ------------------------------------------------------------ */ .note { font-size: 0.9rem; color: var(--ink-2); margin: 1.8em 0; padding: 12px 0 12px 22px; border-left: 1px solid var(--rule-strong); max-width: calc(66ch - 22px); } .note .note-label { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 4px; color: var(--muted); } .note.note-input .note-label { color: var(--amber); } .note.note-warn .note-label { color: var(--red); } .note.note-accent .note-label { color: var(--accent-deep); } /* ------------------------------------------------------------ 10 · Key-figures band ------------------------------------------------------------ */ .figband { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule-strong); margin: 2em 0 1em; } .figband .fig { padding: 18px 18px 16px 0; border-right: 1px solid var(--rule); } .figband .fig:last-child { border-right: 0; } .figband .fig:nth-child(n+2) { padding-left: 18px; } .figband .fig .v { font-family: 'Newsreader', Georgia, serif; font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 550; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); display: block; } .figband .fig .v .u { font-size: 0.62em; color: var(--muted); font-weight: 500; margin-left: 2px; } .figband .fig .l { display: block; margin-top: 8px; font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); } /* ------------------------------------------------------------ 11 · Figures (diagrams) ------------------------------------------------------------ */ figure.figure { margin: 2.6em 0; padding: 24px 0 0; border-top: 1px solid var(--rule-strong); } figure.figure .fig-canvas { background: var(--surface); border: 1px solid var(--rule); padding: 22px 18px; overflow-x: auto; } figure.figure .fig-canvas svg { max-width: 100%; height: auto; display: block; margin: 0 auto; } figure.figure pre.mermaid { margin: 0; } figcaption { margin-top: 12px; font-size: 0.82rem; color: var(--muted); max-width: 60ch; } figcaption .fig-no { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-deep); display: block; margin-bottom: 3px; } /* progressive enhancement */ .js pre.mermaid { display: none; } .js pre.mermaid.rendered, .js pre.mermaid.revealed { display: block; } pre.mermaid.revealed { white-space: pre-wrap; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.78rem; color: var(--ink-2); } /* ------------------------------------------------------------ 12 · Tables ------------------------------------------------------------ */ .tbl-wrap { overflow-x: auto; margin: 2em 0; } table.data { border-collapse: collapse; width: 100%; font-size: 0.92rem; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule-strong); } table.data th { text-align: left; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 10px 16px 8px 0; border-bottom: 1px solid var(--rule-strong); vertical-align: bottom; white-space: normal; min-width: 6ch; } table.data td { padding: 11px 16px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; } table.data tr:last-child td { border-bottom: 0; } /* right-aligned numerals stay on one line */ th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 16px; } /* short enumerating first columns keep one line per item */ table.data td:first-child, table.data .nowrap { white-space: normal; } table.data td .nowrap, table.data td.nowrap { white-space: nowrap; } tr.rowhead td { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule-strong); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-2); padding-top: 14px; } tr.subtotal td { font-weight: 600; border-bottom: 1px solid var(--rule-strong); } tr.total td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule-strong); padding-top: 12px; } /* key–value identification table */ table.kv { border-top: 2px solid var(--ink); } table.kv td { border-bottom: 1px solid var(--rule); } table.kv tr:last-child td { border-bottom: 1px solid var(--rule-strong); } table.kv td:first-child { width: 24%; min-width: 168px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding-top: 14px; vertical-align: baseline; } tbody tr:nth-child(even) td { background: transparent; } table.data tbody tr:nth-child(even):not(.rowhead):not(.total):not(.subtotal) td { background: var(--row-alt); } /* ------------------------------------------------------------ 13 · Funding split bar ------------------------------------------------------------ */ .funding { margin: 2em 0; max-width: 66ch; } .funding .fbar { display: flex; height: 34px; border: 1px solid var(--ink); background: var(--surface); } .funding .seg-eu { background: var(--accent); } .funding .seg-co { background: repeating-linear-gradient(-45deg, var(--paper-deep), var(--paper-deep) 5px, var(--surface) 5px, var(--surface) 9px); } .funding .flegend { display: flex; justify-content: space-between; gap: 16px; margin-top: 8px; font-size: 0.78rem; color: var(--ink-2); flex-wrap: wrap; } .funding .flegend .sw { display: inline-block; width: 11px; height: 11px; border: 1px solid var(--ink); margin-right: 7px; vertical-align: -1px; } .funding .flegend .sw.eu { background: var(--accent); border-color: var(--accent-deep); } .funding .flegend .sw.co { background: repeating-linear-gradient(-45deg, var(--paper-deep), var(--paper-deep) 4px, var(--surface) 4px, var(--surface) 7px); } /* ------------------------------------------------------------ 14 · Schedule ------------------------------------------------------------ */ .schedule { margin: 2em 0; border-top: 2px solid var(--ink); max-width: 66ch; } .sched-row { display: grid; grid-template-columns: 118px 1fr; gap: 0 20px; padding: 13px 0; border-bottom: 1px solid var(--rule); } .sched-row .d { font-variant-numeric: tabular-nums; font-size: 0.8rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); padding-top: 2px; } .sched-row .w { font-size: 0.95rem; } .sched-row .w .who { display: block; font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin-top: 3px; } .sched-row.milestone { border-left: 3px solid var(--accent); padding-left: 12px; margin-left: -15px; } .sched-row.deadline .d { color: var(--red); } /* ------------------------------------------------------------ 15 · Work packages ------------------------------------------------------------ */ .wp { display: grid; grid-template-columns: 128px 1fr; gap: 0 26px; padding: 18px 0; border-top: 1px solid var(--rule); } .wp:last-of-type { border-bottom: 1px solid var(--rule); } .wp .wp-tag { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); line-height: 1.9; } .wp .wp-tag strong { display: block; color: var(--accent-deep); font-size: 0.78rem; letter-spacing: 0.12em; } .wp .wp-body h3 { margin: 0 0 6px; font-size: 1.12rem; } .wp .wp-body ul { margin: 0.4em 0 0; padding-left: 1.25em; } .wp .wp-body li { margin: 0.3em 0; font-size: 0.95rem; } .wp .wp-body li::marker { color: var(--accent); } @media (max-width: 640px) { .wp { grid-template-columns: 1fr; gap: 4px; } .wp .wp-tag { display: flex; gap: 12px; } } /* ------------------------------------------------------------ 16 · Documents list (home) ------------------------------------------------------------ */ .docs { border-top: 2px solid var(--ink); margin: 1.6em 0; } .doc-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 0 22px; padding: 22px 0; border-bottom: 1px solid var(--rule); align-items: start; } .doc-item .doc-no { font-family: 'Newsreader', Georgia, serif; font-size: 1.7rem; color: var(--faint); line-height: 1; padding-top: 4px; } .doc-item h2, .doc-item .doc-title { font-family: 'Newsreader', Georgia, serif; font-size: 1.35rem; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; } .doc-item h2 a { color: var(--ink); text-decoration: none; } .doc-item h2 a:hover { color: var(--accent-deep); } .doc-item p { margin: 0 0 8px; color: var(--ink-2); font-size: 0.95rem; max-width: 56ch; } .doc-item .doc-meta { font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); } .doc-item .go { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; white-space: nowrap; padding-top: 8px; } @media (max-width: 640px) { .doc-item { grid-template-columns: 1fr; gap: 4px; } .doc-item .doc-no { display: none; } .doc-item .go { padding-top: 0; } } /* ------------------------------------------------------------ 17 · Memo — letter document ------------------------------------------------------------ */ .letterhead { border-top: 3px double var(--ink); border-bottom: 1px solid var(--rule-strong); padding: 18px 0 14px; margin: 0 0 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 26px; } .letterhead .k { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; } .letterhead .v { font-size: 0.95rem; font-weight: 550; } .letter { font-family: 'Newsreader', Georgia, serif; font-size: 1.1rem; line-height: var(--leading); } .letter p { max-width: 62ch; margin: 0 0 1.15em; } .letter .salutation { margin-bottom: 1.4em; } .letter strong { font-weight: 650; } .letter h2 { font-size: 1.42rem; } /* letter variant: lighter rules than the report spine */ .letter .sec-head { border-top-width: 1px; } .letter ol, .letter ul { max-width: 58ch; } .letter li::marker { color: var(--accent); } .letter .sig { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 1.5rem; margin-top: 2.6em; } .letter .sig-role { font-family: 'Inter', ui-sans-serif, sans-serif; font-style: normal; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 2px; } /* ------------------------------------------------------------ 18 · Open inputs ------------------------------------------------------------ */ .tasks { border-top: 2px solid var(--ink); margin: 1.6em 0; max-width: 66ch; } .task { display: grid; grid-template-columns: 20px 1fr auto; gap: 0 16px; padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 0.95rem; } .task .tick { width: 13px; height: 13px; border: 1.5px solid var(--rule-strong); margin-top: 6px; } .task .t-ref { color: var(--muted); font-size: 0.82rem; white-space: nowrap; } .task .t-due { font-size: 0.72rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); white-space: nowrap; padding-top: 4px; } .owner { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .owner-genco { color: var(--accent-deep); } .owner-ee { color: var(--ink-2); } .owner-joint { color: var(--muted); } /* ------------------------------------------------------------ 19 · Contents ------------------------------------------------------------ */ .toc { border-top: 2px solid var(--ink); margin: 1.6em 0; } .toc a { display: grid; grid-template-columns: 54px 1fr auto; gap: 0 18px; padding: 14px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); align-items: baseline; } .toc a:hover { background: var(--accent-wash); } .toc .t-no { font-family: 'Newsreader', Georgia, serif; font-size: 1.05rem; color: var(--accent-deep); } .toc .t-desc { color: var(--muted); font-size: 0.85rem; display: block; margin-top: 2px; } .toc .t-arrow { color: var(--faint); font-size: 0.85rem; } .toc a:hover .t-arrow { color: var(--accent-deep); } /* ------------------------------------------------------------ 20 · Pager ------------------------------------------------------------ */ .pager { display: flex; justify-content: space-between; gap: 24px; margin-top: clamp(48px, 6vw, 72px); border-top: 2px solid var(--ink); padding-top: 14px; } .pager a { text-decoration: none; color: var(--ink); max-width: 46%; } .pager a:hover .p-title { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; } .pager .p-dir { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .pager .p-title { font-family: 'Newsreader', Georgia, serif; font-size: 1.08rem; font-weight: 600; } .pager .next { text-align: right; margin-left: auto; } /* ------------------------------------------------------------ 21 · Footer ------------------------------------------------------------ */ .site-footer { border-top: 1px solid var(--rule-strong); padding: 20px var(--pad-x) 32px; font-size: 0.76rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; } /* ------------------------------------------------------------ 22 · Customizer (floating gear + panel) ------------------------------------------------------------ */ .cl-gear { position: fixed; right: 18px; bottom: 18px; z-index: 80; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14); } .cl-gear:hover { color: var(--ink); border-color: var(--ink); } .cl-gear[aria-expanded="true"] { color: var(--accent-deep); border-color: var(--accent); } .cl-panel { position: fixed; right: 18px; bottom: 72px; z-index: 90; width: min(340px, calc(100vw - 36px)); background: var(--surface); border: 1px solid var(--rule-strong); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2); padding: 18px 18px 16px; font-size: 0.88rem; } .cl-panel[hidden] { display: none; } .cl-panel .cl-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .cl-panel .cl-close { border: 0; background: none; font-size: 1.1rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px 6px; } .cl-panel .cl-close:hover { color: var(--ink); } .cl-group { margin-bottom: 14px; } .cl-group .cl-glabel { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; } .cl-themes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .cl-theme { height: 34px; border: 1px solid var(--rule-strong); border-radius: 3px; cursor: pointer; padding: 0; position: relative; overflow: hidden; } .cl-theme .half { position: absolute; inset: 0; } .cl-theme .half.accent { right: 0; left: 55%; } .cl-theme[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 2px; } .cl-theme:hover { border-color: var(--ink); } .cl-theme-names { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; font-size: 0.56rem; text-align: center; color: var(--muted); letter-spacing: 0.02em; text-transform: uppercase; margin-top: 4px; } .cl-seg { display: flex; border: 1px solid var(--rule-strong); border-radius: 3px; overflow: hidden; } .cl-seg button { flex: 1; border: 0; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 0.78rem; padding: 6px 4px; cursor: pointer; border-right: 1px solid var(--rule); } .cl-seg button:last-child { border-right: 0; } .cl-seg button[aria-pressed="true"] { background: var(--accent-wash); color: var(--accent-deep); font-weight: 650; } .cl-seg button:hover:not([aria-pressed="true"]) { background: var(--row-alt); } .cl-reset { width: 100%; margin-top: 2px; border: 1px solid var(--rule-strong); background: none; color: var(--muted); font: inherit; font-size: 0.78rem; padding: 6px; border-radius: 3px; cursor: pointer; } .cl-reset:hover { color: var(--ink); border-color: var(--ink); } /* ------------------------------------------------------------ 23 · Utilities & motion ------------------------------------------------------------ */ .muted { color: var(--muted); } .small { font-size: 0.85rem; } .nowrap { white-space: nowrap; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* small screens: figures band 2-up, schedule stacks */ @media (max-width: 600px) { .figband { grid-template-columns: 1fr 1fr; } .figband .fig { border-right: 0; padding-left: 0; } .figband .fig:nth-child(even) { padding-left: 16px; border-right: 0; } .figband .fig:nth-child(odd) { border-right: 1px solid var(--rule); } .figband .fig:nth-child(-n+2) { border-bottom: 1px solid var(--rule); } .sched-row { grid-template-columns: 1fr; gap: 2px; } .sched-row .d { padding-top: 0; } .sched-row.milestone { margin-left: 0; padding-left: 12px; } .task { grid-template-columns: 20px 1fr; } .task .t-due { grid-column: 2; padding-top: 0; } .task .t-ref { white-space: normal; } } /* ------------------------------------------------------------ 24 · Print — force the light paper theme ------------------------------------------------------------ */ @media print { :root, :root[data-theme] { color-scheme: light; --paper: #faf8f3; --paper-deep: #f3efe6; --surface: #fffefb; --surface-2: #f4f0e7; --row-alt: #faf8f2; --ink: #211d16; --ink-2: #4a4437; --muted: #6e6754; --faint: #a79d89; --rule: #e5dfd1; --rule-strong: #c9c0ac; --accent: #0e7a6a; --accent-deep: #0a5a4e; --accent-wash: #e9f3ef; --amber: #85600a; --amber-wash: #f8f0dc; --red: #a03a2c; --red-wash: #f9ebe7; --topbar-bg: rgba(250, 248, 243, 0.94); } .sidebar, .topbar, .scrim, .pager, .site-footer, .skip, .cl-gear, .cl-panel { display: none !important; } body { background: #fff; } .content { max-width: 100%; padding: 0; } .figband { border-color: #000; } figure.figure .fig-canvas, .tbl-wrap { overflow: visible; } a { color: inherit; } .letterhead, .schedule, .tasks, .toc { break-inside: avoid; } }