/* Vloora type system, 15 October 2026.
   Brings back the October 13 site's use of the custom fonts:
   PP Pangram Sans Semibold for page titles only, PP Neue Montreal Bold for section headings,
   Neue Montreal Book and Medium for reading, Neue Montreal Mono for dates and small details,
   the PP Formula Extended wordmark large in the footer, and pill buttons. */

/* Headings: heavy Neue Montreal, tight, so section heads contrast with the Pangram titles and the Book body. */
h1,h2,h3{font-weight:700;letter-spacing:-.04em}
h1,h2{line-height:1}

/* Header joins the cobalt brand field, the way the old hero carried the wordmark. */
.site-header{background:var(--cobalt);color:var(--white);border-bottom:0;height:88px}
.site-header a{color:var(--white)}
.site-header a:hover{color:var(--acid)}
.logo{width:152px}
.primary-nav a{font-size:16px;font-weight:500}
.primary-nav a[aria-current="page"]::after{background:var(--acid);height:3px;bottom:22px;border-radius:3px}
.nav-cta{background:var(--acid);border:0;border-radius:9999px;padding:10px 18px;font:600 16px/1.25 var(--font);color:var(--ink)!important;transition:background .3s,transform .3s}
.nav-cta:hover{background:var(--white);transform:translateY(-2px)}
.menu-toggle{color:var(--white);border-color:rgba(255,255,255,.55);border-radius:9999px;padding:9px 16px}

/* Buttons: pills, the old site's shape. */
.action{border:0;border-radius:9999px;padding:12px 22px;min-width:0;gap:10px;font:600 16px/1.25 var(--font);box-shadow:inset 0 0 0 1px currentColor;transition:background .3s,color .3s,transform .3s}
.action.primary{background:var(--acid);color:var(--ink);box-shadow:none}
.action:hover{background:var(--white);color:var(--ink);transform:translateY(-2px);box-shadow:none}
.company-strip .action.secondary,.hero .action.secondary{color:var(--white)}

/* Home hero: the title stacks, the accent line sits on its own, nothing between it and the dek. */
.hero-inner{min-height:0;padding-top:clamp(56px,7vw,110px);padding-bottom:clamp(72px,8vw,128px);justify-content:flex-start}
.hero h1{font-family:var(--display);font-weight:600;font-size:clamp(76px,12.4vw,200px);line-height:.9;letter-spacing:-.055em;margin:0 0 clamp(48px,5vw,80px)}
.hero-bottom{border-top:0;padding-top:0;align-items:end}
.hero-bottom .dek{font-weight:500;letter-spacing:-.02em}

/* Section headings in Neue Montreal Bold. */
.intro h2{font-weight:700;font-size:clamp(48px,6.4vw,104px);letter-spacing:-.045em;line-height:.96}
.intro .lede{font-weight:500;letter-spacing:-.025em}
.category h2{font:700 clamp(60px,9.4vw,152px)/.92 var(--font);letter-spacing:-.055em}
.category-bottom{border-top:0;padding-top:0}
.category-bottom p{font-weight:500}
.mechanics h2{font-weight:700;letter-spacing:-.045em}
.mechanics p{font-weight:400}
.section-heading{border-top:0;padding-top:0}
.section-heading h2{font-weight:700;letter-spacing:-.045em}
.research-feature h3{font:700 clamp(40px,4.6vw,72px)/1.02 var(--font);letter-spacing:-.045em}
.research-aside h3{font-weight:700;letter-spacing:-.035em}
.company-strip h2{font-weight:700;font-size:clamp(46px,6vw,96px);letter-spacing:-.045em;line-height:.96}
.company-strip p{font-weight:500}
.prose-grid h2{font-weight:700;letter-spacing:-.04em}
.page-head h1,.paper-head h1{letter-spacing:-.055em}
.page-head p,.paper-head .paper-subtitle{font-weight:500;letter-spacing:-.02em}

/* Dates, kinds and small details in mono, like the case IDs on the old product view. */
.publication-meta,.listing-meta,.paper-publication{font:400 13px/1.5 var(--mono)!important;letter-spacing:.01em}
.listing-title{font:600 16px/1.4 var(--font);letter-spacing:0}
.listing-item .listing-name{font-weight:700;letter-spacing:-.04em}
.paper-nav{font:500 15px/1.35 var(--font)}
.paper-nav a{padding:11px 0}
.article h2{font-weight:700;letter-spacing:-.04em}
.article h3{font-weight:700}
.article th{font-weight:600}

/* Footer: heavy heading, then the wordmark at full width. */
.footer-head{border-top:0;padding-top:0}
.footer-head h2{font:700 clamp(56px,7.4vw,120px)/.95 var(--font);letter-spacing:-.05em}
.footer-head a.email{font-weight:500;letter-spacing:-.02em}
.footer-grid{margin-top:72px}
.site-footer{padding-bottom:clamp(28px,4vw,56px)}
.giant{display:block;width:100%;height:auto;margin:8px 0 0;user-select:none}

/* Scroll lit statement, carried over from the old tagline. Words start dim and light up as the line passes. */
.js [data-say] .w{color:rgba(255,255,255,.28);transition:color .7s cubic-bezier(.32,.72,0,1)}
.js [data-say] .w.on{color:var(--white)}
.js [data-say] .w.hi.on{color:var(--acid)}
@media (prefers-reduced-motion:reduce){.js [data-say] .w{color:var(--white);transition:none}.js [data-say] .w.hi{color:var(--acid)}.action,.nav-cta{transition:none}}

@media(max-width:750px){
 .site-header{height:72px}
 .logo{width:120px}
 .primary-nav{background:var(--cobalt);top:72px}
 .primary-nav a{border-bottom-color:rgba(255,255,255,.25)}
 .primary-nav a[aria-current="page"]::after{bottom:8px}
 .hero h1{font-size:clamp(64px,17vw,96px);margin:20px 0 44px}
 .intro h2{font-size:clamp(44px,12vw,64px)}
 .category h2{font-size:clamp(52px,13vw,84px)}
 .company-strip h2{font-size:clamp(42px,11vw,60px)}
 .footer-head h2{font-size:clamp(52px,13vw,80px)}
 .action{width:auto}
}

/* Code samples: light text on the dark block, set in the mono. */
.article pre{border-radius:12px;padding:24px 26px;line-height:1.6}
.article pre code{background:none;color:inherit;padding:0;font:400 14px/1.6 var(--mono)}

/* One list style for writing and software, on the home page and the Writing page. Dates sit in mono at left. */
.listing{padding-top:clamp(56px,6vw,96px)}
.entries{list-style:none;margin:0;padding:0}
.entry{display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;padding:34px 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.entries li:last-child .entry{border-bottom:1px solid var(--line)}
.entry:hover{color:var(--ink)}
.entry:hover .entry-title{color:var(--cobalt)}
.entry-meta{display:flex;flex-direction:column;gap:2px;font:400 13px/1.6 var(--mono);color:var(--muted);padding-top:8px;white-space:nowrap}
.entry-title{display:block;font:700 clamp(30px,3.6vw,56px)/1.02 var(--font);letter-spacing:-.04em;transition:color .3s}
.entry-desc{display:block;font-size:17px;line-height:1.5;max-width:62ch;margin-top:12px;color:#383744}
.entries-head{font:700 clamp(28px,3vw,40px)/1 var(--font);letter-spacing:-.035em;margin:clamp(64px,7vw,104px) 0 24px}
.research{background:var(--white)}
.research .section-heading{align-items:baseline;margin-bottom:28px}
.research .utility-link{font:600 16px/1.25 var(--font)}

/* Fewer rules on the home page. */
.mechanics>.container{border-top:0;padding-top:0}
.mechanics{padding-block:clamp(64px,8vw,128px)}

@media(max-width:750px){
 .entry{grid-template-columns:1fr;gap:10px;padding:26px 0}
 .entry-meta{flex-direction:row;gap:14px;padding-top:0}
 .entry-desc{font-size:16px}
}