/* rahulgautamsingh.com - Design System 01b (Red / Blue / White / Gold)
   Ported from design_handoff_rgs_01b. Fonts self-hosted (SIL OFL).
   Changes from the handoff:
     - Google Fonts @import replaced with local @font-face (latin subset only)
     - .tldr code / .dark code contrast bug fixed, see end of file
     - decorative hero stickers omitted per brief
*/

@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/bricolage-grotesque-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/bricolage-grotesque-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/plus-jakarta-sans-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/plus-jakarta-sans-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/plus-jakarta-sans-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/plus-jakarta-sans-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* Rahul Gautam Singh — Design System 01b (Red · Blue · White · Gold)
   Drop-in stylesheet. All components read from these tokens. */
:root{
  /* color */
  --bg:#FFFFFF;        /* page background */
  --paper:#F4F6FB;     /* cards, stat tiles, code chips */
  --ink:#0B1F4B;       /* navy: text, borders, dark bands, hard shadows */
  --primary:#E63946;   /* red: CTAs, highlights, links */
  --dark:#B8202C;      /* red pressed / button shadow */
  --accent:#E9B23A;    /* gold: stickers, table totals */
  --c2:#1F4FD8;        /* blue: secondary badges, decorative blobs */
  --c3:#1F4FD8;        /* blue (alias, used in badge rotation) */
  --muted:#4A5578;     /* secondary text */
  /* type */
  --display:'Bricolage Grotesque', sans-serif;
  --body:'Plus Jakarta Sans', system-ui, sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
  --track:-0.5px;      /* base display tracking; multiplied ×2–3 on big headings */
}

*{box-sizing:border-box}

html,body{margin:0;padding:0}

body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--bg);color:var(--ink);transition:background .3s}

a{color:var(--ink);text-decoration:none}
a:hover{color:var(--primary)}

.site{--pad:clamp(20px,5vw,64px);min-height:100vh;background:var(--bg);color:var(--ink);overflow-x:hidden}

.disp{font-family:var(--display);letter-spacing:var(--track)}

.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}

.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 0}

.logo{display:flex;align-items:center;gap:12px;cursor:pointer}

.logo-tile{width:42px;height:42px;border-radius:12px;background:var(--primary);box-shadow:0 4px 0 var(--dark);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:22px;transform:rotate(-4deg);font-family:var(--display)}

.logo-name{font-family:var(--display);font-weight:800;font-size:19px;line-height:1.05;letter-spacing:var(--track)}

.logo-role{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:2px}

.links{display:flex;gap:8px;flex-wrap:wrap}

.links button{font:inherit;font-weight:700;font-size:14.5px;border:2px solid var(--ink);background:transparent;color:var(--ink);padding:9px 16px;border-radius:999px;cursor:pointer;transition:transform .12s}

.links button:hover{transform:translateY(-2px)}

.links button.on{background:var(--ink);color:var(--bg);box-shadow:0 4px 0 #000}

.sticker{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;padding:7px 13px;border-radius:999px;box-shadow:0 3px 0 rgba(0,0,0,.15);color:var(--ink);background:var(--accent);white-space:nowrap}

.btn{font:inherit;display:inline-flex;align-items:center;gap:10px;background:var(--primary);color:#fff;border:0;padding:16px 26px;border-radius:16px;font-size:15.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;box-shadow:0 6px 0 var(--dark);transition:transform .12s,box-shadow .12s}

.btn:hover{color:#fff;transform:translateY(2px);box-shadow:0 4px 0 var(--dark)}

.btn.ghost{background:var(--paper);color:var(--ink);box-shadow:0 6px 0 var(--ink);border:2px solid var(--ink)}

.btn.ghost:hover{color:var(--ink);box-shadow:0 4px 0 var(--ink)}

.hero{position:relative;padding-top:clamp(40px,8vw,90px);padding-bottom:clamp(60px,9vw,110px)}

.blob{position:absolute;border-radius:50%;pointer-events:none}

.h1{font-family:var(--display);font-weight:800;font-size:clamp(52px,9vw,112px);line-height:1.02;letter-spacing:calc(var(--track) * 3);margin:22px 0 0;position:relative;text-wrap:balance}

.mark{position:relative;display:inline-block;white-space:nowrap;color:#fff;padding:0 6px;z-index:0}

.mark::before{content:"";position:absolute;inset:8% -6px 0;background:var(--primary);border-radius:16px;transform:rotate(-1.2deg);z-index:-1}

.lede{font-size:clamp(18px,2vw,22px);line-height:1.45;color:var(--muted);max-width:560px;margin:26px 0 34px;text-wrap:pretty}

.row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

.dark{background:var(--ink);color:var(--bg);border-radius:40px 40px 0 0;padding:clamp(60px,8vw,100px) 0 clamp(70px,9vw,120px)}

.dark a{color:var(--ink)}

.h2{font-family:var(--display);font-weight:800;font-size:clamp(40px,6vw,64px);line-height:.95;letter-spacing:calc(var(--track) * 2);margin:16px 0 56px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:28px}

.card{background:var(--paper);color:var(--ink);border-radius:26px;padding:28px;position:relative;box-shadow:0 8px 0 rgba(0,0,0,.45);display:flex;flex-direction:column;gap:10px;transition:transform .15s}

a.card:hover{transform:translateY(-4px) rotate(-.5deg);color:var(--ink)}

.badge{position:absolute;top:-18px;left:22px;background:var(--b,var(--primary));color:#fff;font-family:var(--display);font-weight:800;padding:5px 13px;border-radius:12px;font-size:15px;box-shadow:0 4px 0 rgba(0,0,0,.25)}

.card .k{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-top:8px}

.card .v{font-family:var(--display);font-weight:800;font-size:23px;line-height:1.1;letter-spacing:var(--track);overflow-wrap:anywhere}

.card .go{margin-top:auto;padding-top:12px;font-weight:800;font-size:14px;color:var(--primary)}

.foot{padding-top:28px;padding-bottom:28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--muted);font-weight:600}

.dark+.foot,.footband{background:var(--ink);color:var(--bg)}

.footband{opacity:1}

.footband .foot{color:var(--bg);opacity:.7;border-top:1px solid rgba(255,255,255,.15)}

.art{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,3vw,36px);background:var(--paper);border:3px solid var(--ink);border-radius:30px;padding:clamp(24px,3.5vw,40px);box-shadow:0 8px 0 var(--ink);transition:transform .15s}

a.art:hover{transform:translateY(-4px);color:var(--ink)}

.art .num{font-family:var(--display);font-weight:800;font-size:clamp(40px,6vw,72px);line-height:.9;color:var(--b);letter-spacing:var(--track)}

.art h3{font-family:var(--display);font-weight:800;font-size:clamp(24px,3vw,36px);line-height:1.05;letter-spacing:var(--track);margin:12px 0 14px;text-wrap:balance}

.art p{margin:0;font-size:16.5px;line-height:1.55;color:var(--muted);max-width:720px;text-wrap:pretty}

.art .date{font-size:12.5px;padding:5px 11px}

.quote{background:var(--paper);color:var(--ink);border-radius:28px;padding:clamp(24px,3.5vw,38px);box-shadow:0 8px 0 rgba(0,0,0,.45);position:relative;margin:0}

.quote p{margin:0;font-size:clamp(17px,1.8vw,20px);line-height:1.5;text-wrap:pretty}

.quote .qm{font-family:var(--display);font-size:72px;line-height:.6;color:var(--b,var(--primary));display:block;margin-bottom:22px}

.letter{display:grid;gap:28px}

.letter .quote:nth-child(2){margin-left:clamp(0px,6vw,80px)}

.who{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:15px}

.who strong{font-family:var(--display);font-size:20px;letter-spacing:var(--track)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:56px}

.stat{background:var(--paper);border:3px solid var(--ink);border-radius:22px;padding:20px 18px;box-shadow:0 6px 0 var(--ink)}

.stat:nth-child(odd){transform:rotate(-1.2deg)}
.stat:nth-child(even){transform:rotate(1deg)}

.stat .n{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.5vw,40px);line-height:1;letter-spacing:var(--track);color:var(--b)}

.stat .l{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-top:8px}

.sec{padding-top:clamp(50px,7vw,90px);padding-bottom:clamp(50px,7vw,90px)}

.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:28px;flex-wrap:wrap}

.eyebrow h2{font-family:var(--display);font-weight:800;font-size:clamp(30px,4vw,44px);margin:0;letter-spacing:calc(var(--track) * 2)}

.tests{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px;margin-bottom:44px}

.tests .quote{border:3px solid var(--ink);box-shadow:0 6px 0 var(--ink);display:flex;flex-direction:column}

.tests .quote p{font-size:17px}

.tests .who{margin-top:auto;padding-top:20px;font-size:13.5px;color:var(--muted)}

.tests .who strong{font-size:17px;color:var(--ink)}

.art{cursor:pointer}

.ah{position:relative;padding-top:clamp(36px,6vw,70px);padding-bottom:clamp(40px,6vw,64px)}

.back{font:inherit;font-weight:800;font-size:14px;background:transparent;border:2px solid var(--ink);color:var(--ink);padding:8px 15px;border-radius:999px;cursor:pointer;position:relative}

.back:hover{background:var(--ink);color:var(--bg)}

.ah h1{font-family:var(--display);font-weight:800;font-size:clamp(38px,6vw,76px);line-height:1.02;letter-spacing:calc(var(--track) * 2.5);margin:22px 0 22px;max-width:1000px;text-wrap:balance;position:relative}

.ah .deck{font-size:clamp(18px,2vw,22px);line-height:1.45;color:var(--muted);font-style:italic;max-width:720px;margin:0;text-wrap:pretty}

.tldr{background:var(--ink);color:var(--bg);border-radius:30px;padding:clamp(24px,3.5vw,40px);box-shadow:0 8px 0 var(--primary);position:relative;max-width:820px;margin:0 auto}

.tldr .sticker{position:absolute;top:-16px;left:28px;transform:rotate(-3deg)}

.tldr p{margin:8px 0 0;font-size:clamp(16.5px,1.7vw,19px);line-height:1.6}

.prose{max-width:720px;margin:0 auto;padding:clamp(40px,6vw,70px) 0 clamp(50px,7vw,90px);font-size:17.5px;line-height:1.7}

.prose p{margin:0 0 1.15em;text-wrap:pretty}

.prose h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.4vw,38px);line-height:1.05;letter-spacing:calc(var(--track) * 2);margin:2.2em 0 .7em;display:flex;align-items:center;gap:14px}

.prose h2::before{content:"";flex:none;width:16px;height:16px;border-radius:5px;background:var(--primary);box-shadow:0 3px 0 var(--dark);transform:rotate(-8deg)}

.prose h2:nth-of-type(3n+2)::before{background:var(--c2);box-shadow:0 3px 0 var(--ink)}

.prose h2:nth-of-type(3n)::before{background:var(--accent);box-shadow:0 3px 0 var(--ink)}

.prose a{color:var(--primary);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

.prose a:hover{color:var(--dark)}

.prose strong{color:var(--ink)}

.prose ol,.prose ul{padding-left:1.3em;margin:0 0 1.2em}

.prose li{margin-bottom:.7em;padding-left:.3em}

.prose li::marker{color:var(--primary);font-weight:800;font-family:var(--display)}

.prose code,.tldr code{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.86em;background:var(--paper);border:1px solid rgba(0,0,0,.08);padding:1px 6px;border-radius:6px;overflow-wrap:anywhere}



.prose pre{background:var(--ink);color:var(--bg);font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:13.5px;line-height:1.6;padding:24px 26px;border-radius:22px;overflow-x:auto;margin:1.6em 0;box-shadow:0 6px 0 var(--primary)}

.tbl{overflow-x:auto;margin:1.6em 0;border:3px solid var(--ink);border-radius:20px;box-shadow:0 6px 0 var(--ink);background:var(--paper)}

.tbl table{border-collapse:collapse;width:100%;font-size:14.5px;line-height:1.5}

.tbl th{text-align:left;font-family:var(--display);font-weight:800;font-size:15px;background:var(--ink);color:var(--bg);padding:12px 16px}

.tbl td{padding:12px 16px;border-top:1px solid rgba(0,0,0,.08);vertical-align:top}

.tbl td code{background:var(--bg)}

.tbl tr.tot td{background:var(--accent)}

.prose figure{margin:2em 0;background:var(--paper);border:3px solid var(--ink);border-radius:22px;padding:12px 12px 0;box-shadow:0 6px 0 var(--ink);transform:rotate(-1.5deg);position:relative}

.prose figure:nth-of-type(even){transform:rotate(1.5deg)}

.prose figure img{display:block;width:100%;height:auto;border-radius:12px}

.prose figcaption{font-size:12.5px;line-height:1.45;color:var(--muted);padding:10px 4px 14px}

.prose figure::before{content:"";display:none;position:absolute;width:64px;height:56px;top:14px;background:var(--primary);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 56' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 46C10 22 30 10 34 26C37 38 20 38 24 24C28 10 46 10 58 20'/%3E%3Cpath d='M48 13L58 20L49 28'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 56' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 46C10 22 30 10 34 26C37 38 20 38 24 24C28 10 46 10 58 20'/%3E%3Cpath d='M48 13L58 20L49 28'/%3E%3C/svg%3E") center/contain no-repeat}

@media (min-width:760px){
.prose figure{float:right;clear:right;width:42%;margin:.3em 0 1em 76px}

.prose figure:nth-of-type(even){float:left;clear:left;margin:.3em 76px 1em 0}

.prose figure::before{display:block;left:-72px}

.prose figure:nth-of-type(even)::before{left:auto;right:-72px;transform:scaleX(-1)}

.prose h2,.prose pre,.tbl{clear:both}

}

@media (min-width:1400px){
.prose figure{width:270px;margin:-.2em -350px 1em 0}

.prose figure:nth-of-type(even){margin:-.2em 0 1em -350px}

.prose figure::before{display:block;left:-72px}

.prose figure:nth-of-type(even)::before{left:auto;right:-72px;transform:scaleX(-1)}

.prose h2,.prose pre,.tbl{clear:none}

}

.next{max-width:820px;margin:0 auto clamp(70px,9vw,110px);display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;align-items:center}

.nextcard{flex:1 1 320px;background:var(--paper);border:3px solid var(--ink);border-radius:24px;padding:22px 24px;box-shadow:0 6px 0 var(--ink);cursor:pointer;transition:transform .15s}

.nextcard:hover{transform:translateY(-3px)}

.nextcard .k{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--primary)}

.nextcard .v{font-family:var(--display);font-weight:800;font-size:22px;line-height:1.1;margin-top:6px;letter-spacing:var(--track)}


/* --- fix: inline code inside dark surfaces --- */
/* The handoff declared .tldr code before .prose code,.tldr code, so the light
   --paper background won on source order and white-on-near-white made the text
   invisible. Declared last here so it actually applies. */
.tldr code,.dark code{background:rgba(255,255,255,.14);color:var(--bg);border:0}

/* nav links are anchors here (static multi-page site), not buttons */
.links a{display:inline-block;font:inherit;font-weight:700;font-size:14.5px;border:2px solid var(--ink);background:transparent;color:var(--ink);padding:9px 16px;border-radius:999px;cursor:pointer;transition:transform .12s}
.links a:hover{transform:translateY(-2px);color:var(--ink)}
.links a.on{background:var(--ink);color:var(--bg);box-shadow:0 4px 0 #000}
.logo{text-decoration:none;color:inherit}
.logo-name,.logo-role{display:block}
.dark .sticker,.dark .who .sticker{color:var(--ink)}
/* code inside a pre block must not pick up the inline-chip styling:
   the chip's light background plus the pre's white text is invisible. */
.prose pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit;overflow-wrap:normal}

/* long meta stickers must wrap on narrow screens. .sticker is nowrap by
   design, and .site has overflow-x:hidden, so without this the text is
   silently clipped rather than scrollable. */
@media (max-width:620px){
  .ah .row .sticker,.art .sticker.date{white-space:normal;text-align:left}
  .who .sticker{white-space:normal;margin-left:0}
}