/* 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}
}

/* Email signup in the footer, posting to the Brevo form. */
.signup{margin:26px 0 30px;max-width:520px}
.signup-label{display:block;font:500 15px/1.4 var(--font);margin-bottom:10px}
.signup-row{display:flex;gap:8px}
.signup input[type=email]{flex:1;min-width:0;font:400 18px/1.3 var(--font);color:var(--ink);background:var(--white);border:1px solid var(--ink);border-radius:9999px;padding:13px 20px}
.signup input[type=email]::placeholder{color:#77757f}
.signup input[type=email]:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px}
.signup button{font:600 16px/1.25 var(--font);background:var(--ink);color:var(--white);border:0;border-radius:9999px;padding:13px 24px;cursor:pointer;transition:background .3s,transform .3s}
.signup button:hover{background:var(--cobalt);transform:translateY(-2px)}
.signup button[disabled]{opacity:.6;cursor:default;transform:none}
.signup-trap{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.signup-status{font:500 16px/1.4 var(--font);margin:12px 0 0;min-height:1.4em}
.footer-head a.email{font-size:clamp(18px,1.8vw,24px);margin-top:4px}
@media(max-width:750px){.signup-row{flex-direction:column}.signup button{align-self:flex-start}}
.signup [hidden]{display:none!important}

/* Signup, take two: a joined field and button, the way most software sites do it. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.signup{margin:22px 0 12px;max-width:500px}
.signup-row{display:flex;align-items:center;gap:6px;background:var(--white);border:1px solid rgba(20,19,34,.28);border-radius:12px;padding:6px;box-shadow:0 1px 2px rgba(20,19,34,.06),0 8px 24px rgba(20,19,34,.08);transition:border-color .2s,box-shadow .2s}
.signup-row:focus-within{border-color:var(--cobalt);box-shadow:0 0 0 4px rgba(36,64,250,.18),0 8px 24px rgba(20,19,34,.08)}
.signup input[type=email]{flex:1;min-width:0;border:0;border-radius:8px;background:transparent;padding:12px 14px;font:400 17px/1.3 var(--font)}
.signup input[type=email]:focus-visible{outline:0}
.signup button{flex:0 0 auto;background:var(--cobalt);color:var(--white);border-radius:8px;padding:12px 20px;font:600 16px/1.25 var(--font);transform:none}
.signup button:hover{background:var(--cobalt2);transform:none}
.signup button:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.signup-note{font:400 14px/1.4 var(--font);color:#45434f;margin:12px 0 0}
.signup-status:empty{display:none}
.signup-status{font:600 17px/1.4 var(--font);margin:6px 0 0}
@media(max-width:750px){.signup-row{flex-direction:row}.signup button{align-self:auto;padding:12px 16px}}

/* Thanks page after subscribing without JavaScript. */
.thanks{background:var(--cream);padding:clamp(90px,12vw,190px) 0 clamp(100px,12vw,180px)}
.thanks h1{font:600 clamp(64px,9vw,148px)/.92 var(--display);letter-spacing:-.055em;margin:0 0 36px}
.thanks p{font:500 clamp(20px,2vw,28px)/1.35 var(--font);letter-spacing:-.02em;max-width:34ch;margin:0 0 40px}
.footer-head>div{min-width:0}
.signup{width:100%}
.site-footer.compact{padding-top:48px}
.site-footer.compact .footer-grid{margin-top:0}
.footer-head .signup{margin:clamp(14px,2vw,30px) 0 28px}
.footer-head .signup + p{margin-bottom:0}

/* News: dated cards on the listing, an ink header with the facts on each item. */
.news-list{background:var(--white);padding:clamp(48px,6vw,96px) 0 clamp(90px,10vw,150px)}
.news-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.news-card{display:flex;flex-direction:column;height:100%;background:var(--cream);border:1px solid var(--line);border-radius:16px;overflow:hidden;color:var(--ink);text-decoration:none;transition:transform .3s,box-shadow .3s}
.news-card:hover{color:var(--ink);transform:translateY(-3px);box-shadow:0 18px 40px rgba(20,19,34,.12)}
.news-card-photo{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--mint)}
.news-card-text{display:flex;flex-direction:column;gap:10px;padding:clamp(24px,3vw,40px);flex:1}
.news-card time{font:700 clamp(30px,3.2vw,48px)/1 var(--font);letter-spacing:-.04em;color:var(--cobalt)}
.news-role{align-self:flex-start;font:600 14px/1 var(--font);background:var(--ink);color:var(--white);border-radius:9999px;padding:7px 12px;margin-top:6px}
.news-card-title{font:700 clamp(24px,2.2vw,34px)/1.08 var(--font);letter-spacing:-.035em;margin-top:8px}
.news-card-event{font:400 13px/1.6 var(--mono);color:var(--muted);margin-top:auto;padding-top:14px}
.news-head{background:var(--ink);color:var(--white);padding:clamp(44px,5vw,70px) 0 clamp(56px,6vw,90px)}
.news-head .utility-link{color:var(--white)}
.news-head h1{font:600 clamp(48px,6.4vw,104px)/.98 var(--display);letter-spacing:-.05em;max-width:1200px;margin:clamp(36px,4vw,60px) 0 clamp(40px,5vw,64px)}
.news-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;border-top:1px solid rgba(255,255,255,.3);padding-top:22px}
.news-facts dt{font:400 13px/1.5 var(--mono);color:rgba(255,255,255,.65);margin-bottom:6px}
.news-facts dd{margin:0;font:500 clamp(17px,1.5vw,21px)/1.35 var(--font);letter-spacing:-.01em}
.news-body{background:var(--white);padding:clamp(56px,6vw,96px) 0 clamp(90px,10vw,150px)}
.news-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;max-width:1100px}
.news-photo{margin:0}
.news-photo img{display:block;width:100%;height:auto;border-radius:16px}
.news-photo figcaption{font:400 13px/1.5 var(--mono);color:var(--muted);margin-top:12px}
.news-copy{max-width:720px;font-size:20px;line-height:1.55}
.news-copy p{margin:0 0 22px}
.news-copy blockquote{margin:36px 0;padding:0 0 0 24px;border-left:4px solid var(--cobalt)}
.news-copy blockquote p{font:500 clamp(22px,2.2vw,30px)/1.3 var(--font);letter-spacing:-.02em;margin:0 0 12px}
.news-copy blockquote footer{font:400 13px/1.5 var(--mono);color:var(--muted)}
.news-copy h2{font:700 24px/1.2 var(--font);letter-spacing:-.02em;margin:48px 0 14px}
.news-links{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.news-links li{border-bottom:1px solid var(--line)}
.news-links a{display:block;padding:14px 0;font:500 18px/1.35 var(--font);text-decoration:none;color:var(--ink)}
.news-links a:hover{color:var(--cobalt)}
@media(max-width:900px){.news-grid{grid-template-columns:1fr}.news-facts{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.news-facts{grid-template-columns:1fr;gap:16px}.news-copy{font-size:18px}}
.news-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.news-grid li:has(.has-photo){grid-column:1/-1}
.news-card.has-photo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.news-card.has-photo .news-card-photo{height:100%;aspect-ratio:auto;min-height:320px}
.news-card.has-photo .news-card-title{font-size:clamp(34px,3.6vw,56px)}
.news-layout{max-width:1536px}
.news-photo{max-width:1000px}
@media(max-width:900px){.news-grid{grid-template-columns:1fr}.news-card.has-photo{display:flex}.news-card.has-photo .news-card-photo{min-height:0;aspect-ratio:3/2}}
.news-copy ol,.news-copy ul:not(.news-links){margin:0 0 22px;padding-left:24px}
.news-copy li{margin-bottom:10px}
.news-copy ol li{font-weight:500}
.news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:900px){.news-grid{grid-template-columns:1fr}}

/* News listing as dated rows, newsroom style: date, headline with event, type at right. */
.news-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.news-row{display:grid;grid-template-columns:150px minmax(0,1fr) 120px;gap:32px;align-items:baseline;padding:30px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.news-row:hover{color:var(--ink)}
.news-row:hover .news-row-title{color:var(--cobalt)}
.news-row time{font:400 14px/1.5 var(--mono);color:var(--muted);white-space:nowrap}
.news-row-title{display:block;font:700 clamp(24px,2.6vw,38px)/1.1 var(--font);letter-spacing:-.035em;transition:color .3s}
.news-row-event{display:block;font:400 16px/1.5 var(--font);color:#45434f;margin-top:8px}
.news-row-type{justify-self:end;font:400 14px/1.5 var(--mono);color:var(--muted)}
.news-copy .news-abstract{border-left-color:var(--line)}
.news-copy .news-abstract p{font:400 19px/1.55 var(--font);letter-spacing:0;margin:0 0 14px}
.news-links a{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:baseline}
.news-link-source{font:400 14px/1.5 var(--mono);color:var(--muted)}
.news-head h1{font-size:clamp(40px,5vw,80px);line-height:1.02;max-width:1100px}
@media(max-width:750px){
 .news-row{grid-template-columns:1fr;gap:8px;padding:24px 0}
 .news-row time,.news-row-type{order:-1}
 .news-row-type{justify-self:start}
 .news-links a{grid-template-columns:1fr;gap:4px}
}
.news-row{grid-template-columns:150px minmax(0,1fr) 170px}.news-row-type{white-space:nowrap}@media(max-width:750px){.news-row{grid-template-columns:1fr}}

/* Align the first software heading with the Writing page content. */
.listing .container > .entries-head:first-child{margin-top:0}

/* About: editorial chapters using the current Vloora type and color system. */
.about-hero{background:var(--cream);padding:clamp(86px,10vw,160px) 0 clamp(96px,11vw,168px)}
.about-hero-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(270px,.7fr);gap:clamp(32px,5vw,92px);align-items:end}
.about-hero h1{font:600 clamp(62px,8.4vw,134px)/.96 var(--display);letter-spacing:-.055em;max-width:11ch;margin:0;text-wrap:balance}
.about-hero p{font:500 clamp(23px,2.25vw,34px)/1.3 var(--font);letter-spacing:-.025em;max-width:18ch;margin:0 0 7px}
.about-situation{background:var(--ink);color:var(--white);padding:clamp(94px,10vw,158px) 0}
.about-situation-layout{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:clamp(50px,8vw,148px)}
.about-situation h2{font:700 clamp(48px,5.7vw,88px)/1.04 var(--font);letter-spacing:-.05em;max-width:9ch;margin:0}
.about-situation-copy p{font:400 clamp(21px,2vw,28px)/1.48 var(--font);letter-spacing:-.015em;max-width:36ch;margin:0 0 36px}
.about-situation-copy p:last-child{font-size:clamp(19px,1.6vw,23px);color:#e7e5f0;margin-bottom:0}
.about-exchange{background:var(--mint);padding:clamp(94px,10vw,160px) 0 clamp(96px,11vw,160px)}
.about-exchange h2{font:700 clamp(51px,6vw,96px)/1.02 var(--font);letter-spacing:-.052em;max-width:1000px;margin:0 0 clamp(48px,6vw,100px)}
.about-exchange-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(34px,5vw,90px);border-top:1px solid var(--ink)}
.about-exchange-side{padding-top:32px}
.about-exchange-side+.about-exchange-side{border-left:1px solid var(--ink);padding-left:clamp(34px,5vw,90px)}
.about-exchange-side h3{font:700 clamp(33px,3.4vw,54px)/1.12 var(--font);letter-spacing:-.04em;max-width:14ch;margin:0 0 30px}
.about-exchange-side p{font:400 clamp(19px,1.7vw,24px)/1.49 var(--font);max-width:41ch;margin:0}
.about-record{background:var(--white);padding:clamp(95px,10vw,166px) 0}
.about-record-layout{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(50px,8vw,154px)}
.about-record h2{font:700 clamp(50px,6vw,96px)/1.03 var(--font);letter-spacing:-.05em;max-width:11ch;margin:0}
.about-record-copy p{font:400 clamp(20px,1.9vw,27px)/1.5 var(--font);max-width:40ch;margin:0 0 30px}
.about-record-copy p:last-child{font-size:clamp(18px,1.6vw,23px);margin-bottom:0}
.about-building{background:var(--cream);padding:clamp(95px,10vw,160px) 0}
.about-building-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,.7fr);gap:clamp(40px,7vw,135px);align-items:end;margin-bottom:clamp(50px,6vw,90px)}
.about-building-head h2{font:700 clamp(49px,5.7vw,91px)/1.03 var(--font);letter-spacing:-.052em;max-width:11ch;margin:0}
.about-building-head p{font:400 clamp(20px,1.9vw,28px)/1.42 var(--font);max-width:28ch;margin:0}
.about-building .entry{border-color:var(--line)}
@media(max-width:1040px){
 .about-hero-layout,.about-situation-layout,.about-record-layout,.about-building-head{grid-template-columns:1fr;gap:38px}
 .about-hero h1{max-width:14ch}
 .about-hero p,.about-building-head p{max-width:33ch}
 .about-situation h2,.about-record h2,.about-building-head h2{max-width:15ch}
 .about-situation-copy p,.about-record-copy p{max-width:52ch}
}
@media(max-width:750px){
 .about-hero{padding:72px 0 100px}
 .about-hero h1{font-size:clamp(47px,12vw,80px);line-height:.98}
 .about-hero p{font-size:23px;max-width:25ch}
 .about-situation,.about-exchange,.about-record,.about-building{padding:82px 0}
 .about-situation h2,.about-exchange h2,.about-record h2,.about-building-head h2{font-size:clamp(43px,10.5vw,67px)}
 .about-situation-copy p,.about-record-copy p,.about-exchange-side p{font-size:20px}
 .about-exchange-grid{grid-template-columns:1fr;gap:0}
 .about-exchange-side{padding:30px 0 42px}
 .about-exchange-side+.about-exchange-side{border-left:0;border-top:1px solid var(--ink);padding:35px 0 0}
 .about-exchange-side h3{font-size:36px}
 .about-building-head{margin-bottom:46px}
}