/* ============================================================================= THE pjob VISUAL SYSTEM · system.css ----------------------------------------------------------------------------- The single source of truth for every surface in the campaign — the site, the tools, the specimen. Change a token in :root and every surface shifts at once; change a component class and that component shifts everywhere. THIS FILE IS CANONICAL. The toolkit and specimen link it directly. The public site (design/prathyushavemula.com/) is deployed with its own folder as root, so it links a byte-identical mirror — design/prathyushavemula.com/system.css. After editing this file, run design/sync-system-css.ps1 to refresh that mirror (and always before `wrangler pages deploy`). Direction: "the working paper" — a serious, evidence-first document. One serif (Source Serif 4) for everything read; the system sans for functional chrome only. Deep teal, the single accent. Emphasis by weight and underline, never italic. No ornament. Pair with the webfont link (place in each surface's ): ============================================================================= */ :root{ /* ---- colour ------------------------------------------------------------ */ --paper:#FBFAF7; /* background — barely-warm near-white */ --paper-raised:#F1EFE8; /* input fields, recessed surfaces */ --ink:#1C1B18; /* primary text — warm near-black */ --ink-soft:#3C3A34; /* secondary text */ --muted:#6E6A62; /* labels, captions, notes */ --teal:#1B544C; /* the accent — links, markers, key terms */ --teal-dark:#123A35; /* accent pressed / hover */ --teal-tint:#1B544C12; /* note-block ground */ --rule:#1C1B1826; /* hairline rule */ --rule-mid:#1C1B1840; /* stronger hairline */ --selection:var(--teal); /* ---- type families ----------------------------------------------------- */ --serif:"Source Serif 4",Georgia,"Times New Roman",serif; --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; /* ---- type scale (fluid; tuned for an effortless read) ------------------ */ --t-title:clamp(2rem, 1.34rem + 2.45vw, 3.05rem); --t-h2:clamp(1.4rem, 1.22rem + 0.85vw, 1.85rem); --t-h3:1.165rem; --t-lead:clamp(1.12rem, 1.06rem + 0.34vw, 1.3rem); --t-body:clamp(1.06rem, 1.02rem + 0.2vw, 1.135rem); --t-small:0.8125rem; --t-label:0.745rem; --lh-body:1.62; /* generous leading for the serif body */ --lh-tight:1.16; /* headings */ --measure:62ch; /* reading width — never wider; "not too wide" */ /* ---- spacing scale ----------------------------------------------------- */ --s1:0.375rem; --s2:0.625rem; --s3:1rem; --s4:1.5rem; --s5:2.25rem; --s6:3.25rem; --s-section:clamp(3.25rem, 2.4rem + 3.4vw, 5.5rem); /* between sections */ --s-para:1.15rem; /* between paragraphs — clearly spaced */ /* ---- layout ------------------------------------------------------------ */ --doc-w:1140px; /* document max width */ --margin-w:224px; /* the sidenote / margin column */ --gap:clamp(2rem, 1.2rem + 2.6vw, 3.25rem); --pad-x:clamp(22px, 4.5vw, 56px); --radius:0px; /* near-square; the system does not round */ } /* ============================================================================= RESET & BASE ============================================================================= */ *{box-sizing:border-box;} html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif); font-size:var(--t-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } ::selection{background:var(--selection); color:var(--paper);} img{max-width:100%; height:auto;} /* ============================================================================= TYPOGRAPHY ============================================================================= */ h1,h2,h3{ margin:0; font-weight:600; line-height:var(--lh-tight); letter-spacing:-0.013em; text-wrap:balance; } p{margin:0; text-wrap:pretty;} a{ color:var(--teal); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2.5px; } a:hover{color:var(--teal-dark);} strong,b{font-weight:600;} small{font-size:var(--t-small);} /* emphasis primitives — weight and underline, never italic */ .term{ text-decoration:underline; text-decoration-color:var(--teal); text-decoration-thickness:2px; text-underline-offset:3px; } .lead{ font-size:var(--t-lead); line-height:1.5; color:var(--ink-soft); max-width:var(--measure); } .statement{ font-size:clamp(1.25rem, 1.08rem + 0.95vw, 1.62rem); font-weight:600; line-height:1.32; letter-spacing:-0.013em; max-width:26ch; } .label{ font-family:var(--sans); font-size:var(--t-label); font-weight:500; letter-spacing:0.085em; text-transform:uppercase; color:var(--muted); } /* ============================================================================= LAYOUT ============================================================================= */ .doc{max-width:var(--doc-w); margin:0 auto; padding:0 var(--pad-x);} /* running header */ .topbar{ position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:blur(6px); border-bottom:1px solid transparent; transition:border-color .25s ease; } .topbar.scrolled{border-bottom-color:var(--rule);} .topbar-in{ max-width:var(--doc-w); margin:0 auto; padding:0 var(--pad-x); height:54px; display:flex; align-items:center; justify-content:space-between; gap:18px; } .topbar .wm{font-size:1rem; font-weight:600; letter-spacing:-0.01em; color:var(--ink); text-decoration:none;} .topbar nav{display:flex; gap:22px;} .topbar nav a{font-family:var(--sans); font-size:0.82rem; color:var(--ink-soft); text-decoration:none;} .topbar nav a:hover{color:var(--teal);} @media(max-width:760px){ .topbar nav{display:none;} } /* document header */ .dochead{padding:clamp(40px,6vw,80px) 0 clamp(24px,3vw,38px);} .dochead .kicker{margin-bottom:var(--s4);} .dochead h1{font-size:var(--t-title); line-height:1.06; max-width:17ch;} .dochead .desc{margin-top:var(--s3); font-size:var(--t-lead); line-height:1.5; color:var(--ink-soft); max-width:52ch;} .dochead .status{ margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--rule); display:flex; gap:var(--s5) var(--s4); flex-wrap:wrap; } .dochead .status span{font-family:var(--sans); font-size:var(--t-small); color:var(--muted);} .dochead .status b{color:var(--ink); font-weight:600;} /* sections */ section{padding:var(--s-section) 0; border-top:1px solid var(--rule);} /* the row — main column + the margin (sidenotes). The owned structural idea. */ .row{display:grid; grid-template-columns:minmax(0,1fr) var(--margin-w); gap:var(--gap); align-items:start;} .row + .row{margin-top:var(--s5);} .main > * + *{margin-top:var(--s-para);} .main > * + .sec-h, .main > * + h2{margin-top:var(--s6);} .main p, .main .lead, .main h2, .main h3, .main ul, .main ol{max-width:var(--measure);} .main h3{font-size:var(--t-h3);} .sidenote{font-size:var(--t-small); line-height:1.5; color:var(--muted);} .sidenote .sn-k{ display:block; font-family:var(--sans); font-size:var(--t-label); font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--teal); margin-bottom:var(--s1); } .sidenote b{color:var(--ink-soft); font-weight:600;} .sidenote + .sidenote{margin-top:var(--s4);} /* margin collapses below the reading breakpoint — the note flows inline, set off by a teal rule, so nothing is lost on a phone */ @media(max-width:980px){ .row{grid-template-columns:1fr; gap:0;} .sidenote{ margin-top:var(--s4); padding-left:14px; border-left:2px solid var(--teal); max-width:var(--measure); } } /* section heading */ .sec-h{display:flex; align-items:baseline; gap:13px; margin-bottom:var(--s2);} .sec-h .n{font-size:1.1rem; font-weight:600; color:var(--teal); font-variant-numeric:tabular-nums;} .sec-h h2{font-size:var(--t-h2);} /* ============================================================================= COMPONENTS ============================================================================= */ /* buttons — a rectangle, not a pill; no shadow */ .btn{ font-family:var(--sans); font-size:0.875rem; font-weight:500; cursor:pointer; padding:9px 18px; border:1px solid var(--teal); background:var(--teal); color:var(--paper); border-radius:var(--radius); transition:background .16s ease, border-color .16s ease; } .btn:hover{background:var(--teal-dark); border-color:var(--teal-dark);} .btn.ghost{background:transparent; color:var(--teal);} .btn.ghost:hover{background:var(--teal); color:var(--paper);} .btn:focus-visible{outline:2px solid var(--teal); outline-offset:2px;} /* form field */ .field label{display:block; font-family:var(--sans); font-size:0.8125rem; font-weight:600; color:var(--ink);} .field .fh{font-family:var(--sans); font-size:var(--t-small); color:var(--muted); margin:2px 0 var(--s2);} .field input,.field textarea,.field select{ width:100%; font-family:var(--sans); font-size:0.9rem; color:var(--ink); background:var(--paper-raised); border:1px solid var(--rule-mid); border-radius:var(--radius); padding:9px 11px; } .field input:focus,.field textarea:focus,.field select:focus{ outline:2px solid var(--teal); outline-offset:1px; background:var(--paper); } /* the exhibit — a ruled table, the way a financial statement is ruled */ table.exhibit{width:100%; border-collapse:collapse; font-size:0.94rem;} table.exhibit caption{ text-align:left; font-family:var(--sans); font-size:var(--t-label); font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); padding-bottom:var(--s2); } table.exhibit th{ text-align:left; font-family:var(--sans); font-size:0.7rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted); border-bottom:1.5px solid var(--ink); padding:0 14px 8px 0; } table.exhibit td{padding:10px 14px 10px 0; border-bottom:1px solid var(--rule); vertical-align:top;} table.exhibit tr:last-child td{border-bottom:1.5px solid var(--ink);} table.exhibit .fig{font-variant-numeric:tabular-nums; font-weight:600;} table.exhibit td.role{color:var(--ink-soft);} .sw{display:inline-block; width:13px; height:13px; border:1px solid var(--rule-mid); vertical-align:-1px; margin-right:8px;} @media(max-width:560px){ table.exhibit{font-size:0.84rem;} table.exhibit th,table.exhibit td{padding-right:9px;} } /* note block — a quiet, ruled aside */ .note{background:var(--teal-tint); border-left:2.5px solid var(--teal); padding:16px 20px;} .note .nh{ font-family:var(--sans); font-size:var(--t-label); font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--teal); margin-bottom:var(--s1); } .note p{font-size:0.95rem; line-height:1.55; color:var(--ink-soft); max-width:60ch;} /* footer */ .site-foot{border-top:1px solid var(--rule); padding:var(--s5) 0 var(--s6);} .site-foot .foot-in{ max-width:var(--doc-w); margin:0 auto; padding:0 var(--pad-x); display:flex; gap:var(--s4); flex-wrap:wrap; justify-content:space-between; font-family:var(--sans); font-size:var(--t-small); color:var(--muted); } /* ============================================================================= UTILITIES ============================================================================= */ .measure{max-width:var(--measure);} .tabular{font-variant-numeric:tabular-nums;} .flow > * + *{margin-top:var(--s-para);} /* ============================================================================= MOTION & PRINT ============================================================================= */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{transition:none !important;} } @media print{ body{background:#fff;} .topbar{position:static; border:0;} section{break-inside:avoid;} @page{margin:18mm;} }