/* ============================================================================ rds-page.css · RDS "Refined register" for deliverable documents The same visual language as RDS_Dashboard.html: white field, big serif hero with per-letter hover, tone-on-tone grotesk headings, mono eyebrows, borderless entries, animated marks, flashing links. Pairs with rds-letter-color.js (title hover) and rds-marks.js (animated X mark). ========================================================================== */ :root{ --red:#E04A14; --red-dark:#B83A0E; --lime:#D0FF00; --ink:#1A1A1A; --cream:#F4F0E6; --backdrop:#DEDAD0; --paper:#FFFFFF; --muted:#5D6C7B; --rule:rgba(26,26,26,0.12); --ink-soft:#333333; --p-blue:#0073FF; --hs:color-mix(in srgb, var(--red) 20%, transparent); --grotesk:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif; --serif:"EB Garamond","Adobe Garamond Pro",Georgia,serif; --jp:"Noto Sans JP",sans-serif; --jpserif:"Zen Old Mincho",serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace; --measure:820px; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;padding:0 0 0;background:var(--paper);color:var(--ink); font-family:var(--serif);font-size:18px;line-height:1.62;-webkit-font-smoothing:antialiased;} a{color:var(--red);text-decoration:none;} img{max-width:100%;height:auto;} svg{max-width:100%;height:auto;} /* Shared content column. Every direct child of except the hero and the page footer is centered to a readable measure. */ body > :not(.rds-hero):not(.rds-foot){max-width:var(--measure);margin-left:auto;margin-right:auto;padding-left:32px;padding-right:32px;} /* ---- Hero (white, editorial; mirrors the dashboard hero) ----------------- */ .rds-hero{background:#fff;color:var(--ink);padding:64px 0 52px;text-align:center;} .rds-hero .inner{max-width:1140px;margin:0 auto;padding:0 32px;} .rds-hero .kicker{font-family:var(--mono);font-size:13px;letter-spacing:0.22em; text-transform:uppercase;color:var(--red);margin:0 0 22px;} .rds-hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(48px,9vw,120px); line-height:1.02;margin:0;letter-spacing:-0.01em;text-transform:uppercase;color:var(--ink-soft);text-shadow:none;text-wrap:balance;} .rds-hero h1 .letter{transition:color .1s;cursor:default;} .rds-hero .h1-jp{font-family:var(--jp);font-weight:700;font-size:clamp(22px,3.6vw,38px); line-height:1.18;margin:18px auto 0;color:var(--ink-soft);letter-spacing:0.01em;max-width:24ch;text-wrap:balance;} .rds-hero .h1-jp .letter{transition:color .1s;cursor:default;} .rds-hero .subtitle{font-family:var(--serif);font-style:italic;font-size:21px; line-height:1.5;color:var(--muted);margin:26px auto 0;max-width:62ch;} /* ---- Outline / TOC ------------------------------------------------------- */ nav#TOC{margin:0 auto;padding:26px 0 28px;border-top:2px solid var(--red);border-bottom:1px solid var(--rule);} nav#TOC #toc-title{display:none;} nav#TOC::before{content:"Outline / \76EE\6B21";display:block;font-family:var(--mono); font-size:13px;letter-spacing:0.22em;text-transform:uppercase;color:var(--red);margin:0 0 14px;} nav#TOC ul{list-style:none;padding-left:0;margin:0;} nav#TOC ul ul{padding-left:20px;margin:2px 0 6px;} nav#TOC li{margin:4px 0;} nav#TOC a{font-family:var(--grotesk);font-size:15px;color:var(--ink-soft);font-weight:600;} nav#TOC ul ul a{font-size:13.5px;color:var(--muted);font-weight:400;} nav#TOC a:hover{color:var(--red);} /* ---- Headings (tone-on-tone, like the dashboard) ------------------------- */ h1,h2,h3,h4{font-family:var(--grotesk);letter-spacing:-0.01em;color:var(--ink-soft);} h1.title{display:none;} /* original pandoc title; replaced by .rds-hero */ .rds-body h1:not(.title){font-size:30px;font-weight:700;margin:48px auto 8px;padding-top:14px; border-top:2px solid var(--red);text-shadow:0.05em 0.06em 0 var(--hs);} .rds-body h2{font-size:24px;font-weight:700;margin:42px auto 6px;line-height:1.08;text-shadow:0.05em 0.06em 0 var(--hs);} .rds-body h3{font-size:19px;font-weight:600;margin:28px auto 4px;color:var(--red-dark);} .rds-body h4{font-size:14px;font-weight:600;margin:22px auto 2px;font-family:var(--mono); text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);} h2 .jp,h3 .jp{display:block;font-family:var(--jp);font-weight:inherit;font-size:1em;color:inherit;margin-top:5px;letter-spacing:0.01em;} /* ---- Body copy, lists, quotes, code, tables ------------------------------ */ p{margin:15px auto;} strong{font-weight:600;} em{font-style:italic;} ul,ol{margin:14px auto;padding-left:1.4em;} li{margin:6px 0;} .d-jp{display:block;font-family:var(--jpserif);color:inherit;margin-top:5px;line-height:1.55;font-style:normal;} code{font-family:var(--mono);font-size:0.86em;background:rgba(26,26,26,0.06);padding:1px 5px;border-radius:3px;white-space:pre-wrap;} pre{background:var(--ink);color:var(--cream);padding:16px 20px;border-radius:4px;overflow:auto;} pre code{background:none;color:inherit;padding:0;} blockquote{border-left:3px solid var(--red);margin:18px auto;padding:2px 0 2px 20px;color:var(--muted);font-style:italic;} blockquote p{margin:8px auto;} hr{border:0;border-top:1px solid var(--rule);margin:38px auto;} table{border-collapse:collapse;width:100%;margin:22px auto;font-family:var(--grotesk);font-size:14px; font-variant-numeric:lining-nums tabular-nums;} th,td{border:1px solid var(--rule);padding:8px 11px;text-align:left;vertical-align:top;} thead th{background:var(--cream);font-weight:600;border-bottom:2px solid var(--ink);} tbody tr:nth-child(even){background:rgba(244,240,230,0.5);} caption{margin-bottom:.75em;font-family:var(--mono);font-size:12px;color:var(--muted);} /* Coequal Japanese companion inside table cells */ th .dj,td .dj{display:block;font-family:var(--jp);font-size:0.84em;font-weight:400;color:var(--muted);margin-top:3px;letter-spacing:0;} span.smallcaps{font-variant:small-caps;} div.columns{display:flex;gap:min(4vw,1.5em);} div.column{flex:auto;overflow-x:auto;} ul.task-list[class]{list-style:none;padding-left:0;} ul.task-list li input[type="checkbox"]{width:.8em;margin:0 .6em 0 0;vertical-align:middle;} /* ---- Animated X mark (rds-marks.js upgrades .mark > svg) ------------------ */ .xmark{display:inline-block;width:0.92em;height:0.92em;vertical-align:-0.13em;} .xmark svg{display:block;width:100%;height:100%;overflow:visible;} .xmark line{stroke:var(--red);stroke-width:15;stroke-linecap:square;} /* ---- Inline brand-shape marks (replace shape emojis) --------------------- */ .mk{display:inline-block;width:0.82em;height:0.82em;vertical-align:-0.08em;margin-right:0.34em;} .mk svg{display:block;width:100%;height:100%;} .mk .fill{fill:var(--red);} .mk .stroke{fill:none;stroke:var(--red);} /* ---- Flashing links (brand behaviour #01): in-content links + footer ----- */ @keyframes rds-link-cycle{0%{color:#E8551E;}20%{color:#FAC748;}40%{color:#5FB44A;}60%{color:#37B6C4;}80%{color:#F88DAD;}100%{color:#E8551E;}} main a:not(.card), .rds-body a, .rds-foot a{animation:rds-link-cycle 2s linear infinite;} nav#TOC a{animation:none;} @media (prefers-reduced-motion: reduce){main a, .rds-body a, .rds-foot a{animation:none;color:var(--red);}} /* ---- Footer -------------------------------------------------------------- */ .rds-foot{background:#fff;color:var(--muted);font-family:var(--mono);font-size:12px; line-height:1.8;padding:44px 0;margin-top:48px;border-top:1px solid var(--rule);} .rds-foot .inner{max-width:var(--measure);margin:0 auto;padding:0 32px;} .rds-foot a{color:var(--red);} @media(max-width:760px){ .rds-hero{padding:44px 0 36px;} body > :not(.rds-hero):not(.rds-foot){padding-left:20px;padding-right:20px;} }