html{font-size:62.5%;}:root{--min-screen-width:375px;--max-screen-width:1440px;--primary:#611F29;--primary-5:#611f290d;--primary-10:#611f291a;--primary-20:#611f2933;--primary-30:#611f294d;--primary-40:#611f2966;--primary-50:#611f2980;--primary-60:#611f2999;--primary-70:#611f29b3;--primary-80:#611f29cc;--primary-90:#611f29e6;--primary-hover:#7C2A34;--primary-dark:#3A1017;--primary-darker:#230A0E;--secondary:#83643B;--accent:#E6C880;--bg-body:#F2EAD9;--bg-alt:#E9DFC8;--bg-raised:#F7F1E4;--bg-invert:#611F29;--cream:#F7ECDA;--text:#23201B;--text-muted:#5D5142;--text-subtle:#736859;--text-invert:#F7ECDA;--line:#D6C8AB;--line-soft:#E3D8C1;--line-strong:#8F8572;--space-4xs:clamp(0.4rem,calc(0.09vw + 0.36rem),0.5rem);--space-3xs:clamp(0.6rem,calc(0.19vw + 0.53rem),0.8rem);--space-2xs:clamp(0.8rem,calc(0.19vw + 0.73rem),1rem);--space-xs:clamp(1.2rem,calc(0.19vw + 1.13rem),1.4rem);--space-s:clamp(1.6rem,calc(0.38vw + 1.46rem),2rem);--space-m:clamp(2.2rem,calc(0.56vw + 1.99rem),2.8rem);--space-l:clamp(3.3rem,calc(1.13vw + 2.88rem),4.5rem);--space-xl:clamp(5rem,calc(2.25vw + 4.15rem),7.4rem);--space-2xl:clamp(7.4rem,calc(4.23vw + 5.81rem),11.9rem);--space-3xl:clamp(11rem,calc(7.51vw + 8.18rem),19rem);--text-xs:clamp(1.1rem,calc(0.09vw + 1.06rem),1.2rem);--text-s:clamp(1.4rem,calc(0.09vw + 1.36rem),1.5rem);--text-m:clamp(1.8rem,calc(0.09vw + 1.76rem),1.9rem);--text-l:clamp(2rem,calc(0.38vw + 1.86rem),2.4rem);--text-xl:clamp(2.2rem,calc(0.75vw + 1.92rem),3rem);--text-2xl:clamp(2.8rem,calc(1.88vw + 2.1rem),4.8rem);--text-3xl:clamp(3.8rem,calc(3.57vw + 2.46rem),7.6rem);--text-4xl:clamp(4.4rem,calc(6.38vw + 2.01rem),11.2rem);}.bg-primary{background-color:var(--primary);}.bg-primary-5{background-color:var(--primary-5);}.bg-primary-10{background-color:var(--primary-10);}.bg-primary-20{background-color:var(--primary-20);}.bg-primary-30{background-color:var(--primary-30);}.bg-primary-40{background-color:var(--primary-40);}.bg-primary-50{background-color:var(--primary-50);}.bg-primary-60{background-color:var(--primary-60);}.bg-primary-70{background-color:var(--primary-70);}.bg-primary-80{background-color:var(--primary-80);}.bg-primary-90{background-color:var(--primary-90);}.text-primary{color:var(--primary);}.text-primary-5{color:var(--primary-5);}.text-primary-10{color:var(--primary-10);}.text-primary-20{color:var(--primary-20);}.text-primary-30{color:var(--primary-30);}.text-primary-40{color:var(--primary-40);}.text-primary-50{color:var(--primary-50);}.text-primary-60{color:var(--primary-60);}.text-primary-70{color:var(--primary-70);}.text-primary-80{color:var(--primary-80);}.text-primary-90{color:var(--primary-90);}.border-primary{border-color:var(--primary);}.border-primary-5{border-color:var(--primary-5);}.border-primary-10{border-color:var(--primary-10);}.border-primary-20{border-color:var(--primary-20);}.border-primary-30{border-color:var(--primary-30);}.border-primary-40{border-color:var(--primary-40);}.border-primary-50{border-color:var(--primary-50);}.border-primary-60{border-color:var(--primary-60);}.border-primary-70{border-color:var(--primary-70);}.border-primary-80{border-color:var(--primary-80);}.border-primary-90{border-color:var(--primary-90);}.bg-primary-hover{background-color:var(--primary-hover);}.text-primary-hover{color:var(--primary-hover);}.bg-primary-dark{background-color:var(--primary-dark);}.bg-primary-darker{background-color:var(--primary-darker);}.text-secondary{color:var(--secondary);}.border-secondary{border-color:var(--secondary);}.text-accent{color:var(--accent);}.border-accent{border-color:var(--accent);}.bg-body{background-color:var(--bg-body);}.bg-alt{background-color:var(--bg-alt);}.bg-raised{background-color:var(--bg-raised);}.bg-invert{background-color:var(--bg-invert);}.bg-cream{background-color:var(--cream);}.text-cream{color:var(--cream);}.text-text{color:var(--text);}.text-muted{color:var(--text-muted);}.text-subtle{color:var(--text-subtle);}.text-invert{color:var(--text-invert);}.border-line{border-color:var(--line);}.border-line-soft{border-color:var(--line-soft);}.border-line-strong{border-color:var(--line-strong);}@media (prefers-reduced-motion:reduce){*,::before,::after{animation-delay:-1ms !important;animation-duration:1ms !important;animation-iteration-count:1 !important;background-attachment:initial !important;scroll-behavior:auto !important;transition-duration:0s !important;transition-delay:0s !important;}}/* Custom Stylesheets */ /* Jaswant Singh Jas — archive base Type families,the two textile motifs,and the focus ring. Everything else lives in Colours / Typography / Spacing. */ :root{/* Two serifs,as editorial design has always done:a display face and a text face. EB Garamond has an x/cap ratio of 0.622 — beautiful large,too small and too delicate for a 2,000-word chapter. Spectral carries the reading. Noto Serif Gurmukhi is second in each stack,never first:the browser picks per character,so Latin comes from the Latin face and Gurmukhi from Noto. The mono carries years,eyebrows and archive metadata — structural,not decorative:it makes the site read as a catalogue rather than a blog. */ --font-display:"EB Garamond","Noto Serif Gurmukhi",Georgia,"Times New Roman",serif;--font-serif:"Spectral","Noto Serif Gurmukhi",Georgia,"Times New Roman",serif;--font-sans:"Spectral","Noto Serif Gurmukhi",Georgia,serif;--font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular","Courier New",monospace;--header-height:7.4rem;--measure:44ch;/* The lattice — Punjabi counted geometry and Welsh double-cloth share the diamond. Used structurally (frames,dividers,the weave index),never as ornament. */ --lattice:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M0 9 L9 0 L18 9 L9 18 Z' fill='none' stroke='%23611f29' stroke-width='0.7'/%3E%3C/svg%3E");--lattice-cream:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M0 13 L13 0 L26 13 L13 26 Z' fill='none' stroke='%23f7ecda' stroke-width='0.7'/%3E%3C/svg%3E");/* Paper grain. Applied at 5% multiply on a fixed overlay. */ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}/* Focus is never removed,only styled. WCAG 2.2 AA. */ :focus-visible{outline:2px solid var(--primary);outline-offset:3px;}/* Form borders need 3:1 against paper (WCAG 1.4.11). --line is 1.38:1 and is for decorative rules only — the contribution form must not use it. */ input,select,textarea{border:1px solid var(--line-strong);background:var(--bg-raised);color:var(--text);font-family:inherit;}/* Headings are the display face,and take authority from size and spacing,never from weight. Body stays on the text face. */ h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:400;line-height:1.05;margin:0;}/* Pull quotes and chapter openings are display too — the places Garamond earns its keep. */ blockquote,.lede{font-family:var(--font-display);font-weight:400;}/* ------------------------------------------------------------------------ BUILDER COMPATIBILITY LAYER — do not use these when designing by hand. BricksFusion generates sections against Core Framework's DEFAULT variable vocabulary (--light,--dark,--tertiary-*,--primary-l-3,--radius-*). Those names do not exist in this project,so generated output would reference undefined variables and render unstyled. Rather than fight the generator in prose,these aliases point its vocabulary at our palette:it emits its usual names,our design comes out. Every pair in its own contrast rules has been checked against these values. When designing by hand,use the named tokens (--primary,--bg-body,--text,--line) — not these. --------------------------------------------------------------------- */ :root{--light:#f7ecda;/* = cream — light sections,text on dark */ --dark:#23201b;/* = text/ink — dark sections,text on light */ /* Maroon ramp — --primary-l-3 is the generator's "soft brand section" */ --primary-l-1:#906166;--primary-l-2:#b79798;--primary-l-3:#d6c3c0;--primary-l-4:#ede4df;--primary-d-1:#4c1820;--primary-d-2:#381218;--primary-d-3:#270c10;--primary-d-4:#17070a;/* Sepia ramp */ --secondary-l-1:#a89172;--secondary-l-2:#c6b6a0;--secondary-l-3:#ded4c5;--secondary-l-4:#f1ebe1;--secondary-d-1:#664e2e;--secondary-d-2:#4c3a22;--secondary-d-3:#342818;--secondary-d-4:#1f180e;/* Neutral ramp. The generator uses tertiary for cards,borders and dark grounds. l-1 is deliberately the same value as --line-strong:it is the lightest neutral that still reaches 3:1,so it is the only one of these safe for a control border. */ --tertiary:#8f8572;--tertiary-l-1:#8f8572;--tertiary-l-2:#ccc5b9;--tertiary-l-3:#e2ddd3;--tertiary-l-4:#f2eee6;--tertiary-d-1:#706859;--tertiary-d-2:#534d42;--tertiary-d-3:#39352e;--tertiary-d-4:#22201b;/* Radius. The brief rules out rounded corners,so the generator's entire radius vocabulary resolves to square — including xxl,which its own rules assign to badges and tags. Decade and media-type tags are archive labels;they are not pills. It can obey its rules to the letter;the design stays as drawn. */ --radius-xs:0;--radius-s:0;--radius-m:0;--radius-l:0;--radius-xl:0;--radius-xxl:0;}