/* Blog: article modules. Loaded after site.css on blog pages only. */
button{font:inherit;color:inherit}
.blog-page h1{font-family:var(--serif);font-weight:300;font-size:clamp(38px,5.2vw,72px);line-height:1.04;letter-spacing:-.01em}
.blog-page .flow h2,.blog-page .posts h2,.blog-page .deck h2{font-size:clamp(32px,3.6vw,48px);line-height:1.1}
.blog-page h3{font-size:clamp(23px,2vw,28px);line-height:1.2}
.blog-page .post h2{font-size:clamp(28px,2.8vw,38px)}
.blog-page .a-end h2{font-size:clamp(34px,4.4vw,60px);font-weight:300}
/* ---------- Blog index ---------- */
.idx-hero{padding-block:clamp(80px,11vw,150px) clamp(56px,7vw,96px)}
.idx-hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,6vw,96px);align-items:end}
.idx-hero .wrap > *{min-width:0}
.idx-hero h1 em{font-style:italic;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold-lt)}
@media (max-width:860px){.idx-hero .wrap{grid-template-columns:1fr}}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);padding-block:clamp(56px,7vw,96px)}
@media (max-width:860px){.posts{grid-template-columns:1fr}}
.post{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--rule-l);background:var(--paper);transition:transform .4s,border-color .4s}
.post:hover{transform:translateY(-4px);border-color:var(--gold)}
.post .cover{position:relative;aspect-ratio:16/10;max-width:100%;background:var(--ink);overflow:hidden;display:flex;align-items:center;justify-content:center}
.post .cover canvas{position:absolute;inset:0;width:100%;height:100%}
.post .cover .glyph{position:relative;font-family:var(--serif);font-weight:300;font-size:clamp(56px,7vw,104px);line-height:1;color:var(--gold-lt);font-style:italic}
.post .body{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:16px;flex:1}
.post .meta{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-l)}
.post h2{font-size:clamp(28px,2.8vw,38px)}
.post .inside{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:12px}
.chip{font-size:12px;letter-spacing:.06em;padding:5px 12px;border:1px solid var(--rule-l);color:var(--mute-l);border-radius:999px}
.post .go{margin-top:8px}

/* ---------- Article ---------- */
.a-hero{padding-block:clamp(72px,10vw,140px) clamp(56px,7vw,96px)}
.crumb{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-d);display:flex;gap:10px;flex-wrap:wrap}
.crumb a{text-decoration:none;color:var(--gold-lt)}
.a-hero h1{margin-top:28px;max-width:20ch}
.a-hero .lede{margin-top:32px;max-width:60ch;color:var(--mute-d);font-size:clamp(17px,1.4vw,19px)}
.a-meta{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:40px;padding-top:28px;border-top:1px solid var(--rule-d);align-items:center}
.a-meta span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-d)}

/* One-minute summary */
.minute{border:1px solid var(--rule-l);background:var(--cream);padding:clamp(24px,3vw,36px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:start}
.minute ol{margin:10px 0 0;padding-left:1.2em;display:flex;flex-direction:column;gap:8px}
.minute li::marker{color:var(--gold);font-family:var(--serif)}

.a-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(32px,6vw,96px);padding-block:clamp(56px,7vw,96px)}
.a-layout > *{min-width:0}
.toc{position:sticky;top:104px;align-self:start;display:flex;flex-direction:column;gap:2px}
.toc a{display:block;font-size:13px;line-height:1.4;text-decoration:none;color:var(--mute-l);padding:8px 0 8px 14px;border-left:1px solid var(--rule-l);transition:color .2s,border-color .2s}
.toc a.on{color:var(--ink);border-left-color:var(--gold)}
@media (max-width:980px){.a-layout{grid-template-columns:1fr}.toc{display:none}}
.flow{display:flex;flex-direction:column;gap:clamp(64px,8vw,104px)}
.sec{display:flex;flex-direction:column;gap:22px;scroll-margin-top:96px}
.sec > p,.sec .prose p{max-width:66ch}
.sec .prose{display:flex;flex-direction:column;gap:18px}
.sec h3{margin-top:12px}
.big-quote{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3vw,42px);line-height:1.15;padding-left:28px;border-left:1px solid var(--gold);max-width:24ch}
.big-quote em{color:var(--gold)}
.note{font-size:14px;color:var(--mute-l);max-width:66ch}

/* Silenzio margin note: the brand's point of view, opened on demand */
.view{border-top:1px solid var(--gold);padding-top:18px}
.view summary{list-style:none;cursor:pointer;display:flex;gap:16px;align-items:center;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.view summary::-webkit-details-marker{display:none}
.view summary::after{content:"+";font-family:var(--serif);font-size:24px;letter-spacing:0;margin-left:auto;transition:transform .3s}
.view[open] summary::after{transform:rotate(45deg)}
.view .vbody{padding-top:18px;display:flex;flex-direction:column;gap:14px;max-width:66ch}
.view .vbody p:first-child{font-family:var(--serif);font-size:clamp(22px,2vw,27px);line-height:1.3}

/* Tabs */
.tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--rule-l)}
.tabs [role=tab]{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:14px 18px 14px 0;margin-right:18px;cursor:pointer;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute-l)}
.tabs [role=tab][aria-selected=true]{color:var(--ink);border-bottom-color:var(--gold)}
.panel{padding-top:28px}
.listen-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:center}
.listen-panel > *{min-width:0}
@media (max-width:700px){.listen-panel{grid-template-columns:1fr}}
.listen-panel .def{font-family:var(--serif);font-size:clamp(24px,2.4vw,32px);line-height:1.2}
.meter{display:flex;flex-direction:column;gap:12px}
.meter .row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:center;font-size:13px;color:var(--mute-l)}
.meter .track{height:6px;background:var(--rule-l);position:relative;overflow:hidden}
.meter .fill{position:absolute;inset:0 auto 0 0;background:var(--gold);transition:width .6s cubic-bezier(.2,.7,.2,1)}

/* Stepper (the 7 steps are a real sequence) */
.stepper{border:1px solid var(--rule-l);background:var(--paper)}
.steps-nav{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--rule-l)}
.steps-nav button{background:none;border:0;border-right:1px solid var(--rule-l);padding:18px 6px;cursor:pointer;font-family:var(--serif);font-size:26px;color:var(--mute-l);position:relative;transition:background .2s,color .2s}
.steps-nav button:last-child{border-right:0}
.steps-nav button[aria-selected=true]{background:var(--ink);color:var(--gold-lt)}
.steps-nav button.done{color:var(--gold)}
.step-panel{padding:clamp(24px,3.4vw,44px);display:flex;flex-direction:column;gap:16px;min-height:250px}
.step-panel h3{margin:0}
.step-panel .ex{font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.35;color:var(--ink);border-left:1px solid var(--gold);padding-left:18px}
.step-ctrl{display:flex;justify-content:space-between;gap:12px;margin-top:auto;padding-top:12px}
.step-ctrl button{background:none;border:0;cursor:pointer;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);padding:6px 0}
.step-ctrl button:disabled{opacity:.3;cursor:default}

/* Technique cards that open a pop-up */
.tech{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule-l);border:1px solid var(--rule-l)}
.tech button{flex:1 1 200px;background:var(--paper);border:0;text-align:left;padding:24px 22px;cursor:pointer;display:flex;flex-direction:column;gap:14px;min-height:150px;transition:background .25s}
.tech button:hover{background:var(--cream)}
.tech .t{font-family:var(--serif);font-size:24px;line-height:1.15}
.tech .open{margin-top:auto;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
dialog.pop{border:0;padding:0;max-width:min(560px,calc(100vw - 32px));width:100%;background:var(--ink);color:var(--cream);box-shadow:0 30px 80px rgba(0,0,0,.35)}
dialog.pop::backdrop{background:rgba(15,14,12,.55);backdrop-filter:blur(3px)}
.pop-in{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;gap:18px}
.pop-in h3{font-size:clamp(28px,3vw,38px)}
.pop-in p{color:var(--mute-d)}
.pop-in .use{font-family:var(--serif);font-style:italic;font-size:21px;color:var(--cream);border-left:1px solid var(--gold-lt);padding-left:16px}
.pop-x{position:absolute;top:14px;right:16px;background:none;border:0;color:var(--mute-d);font-size:28px;line-height:1;cursor:pointer;padding:8px}

/* Before / after switch */
.versus{border:1px solid var(--rule-l)}
.vs-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:20px clamp(20px,3vw,32px);border-bottom:1px solid var(--rule-l)}
.vs-top h3{margin:0;font-size:22px}
.switch{display:inline-flex;border:1px solid var(--rule-l);border-radius:999px;padding:3px;background:var(--cream)}
.switch button{border:0;background:none;border-radius:999px;padding:8px 16px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute-l);cursor:pointer;transition:background .3s,color .3s}
.switch button[aria-pressed=true]{background:var(--ink);color:var(--gold-lt)}
.vs-body{padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:18px}
.said{font-size:14px;color:var(--mute-l)}
.said b{font-weight:500;color:var(--ink)}
.reply{font-family:var(--serif);font-size:clamp(23px,2.3vw,30px);line-height:1.25;transition:opacity .35s}
.reply.bad{color:var(--mute-l)}
.effect{font-size:14px;display:flex;gap:10px;align-items:center}
.effect::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none}
.effect.bad::before{background:transparent;border:1px solid var(--mute-l)}
.tl{display:grid;gap:0;border-top:1px solid var(--rule-l)}
.tl li{list-style:none;display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--rule-l);font-size:15px}
.tl li b{font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.tl{padding:0;margin:0}

/* Benefits grid / errors */
.ben{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:28px 36px}
.ben div{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:1px solid var(--rule-l)}
.ben h4{font-family:var(--serif);font-size:22px;line-height:1.2}
.ben p{font-size:15px;color:var(--mute-l)}
.errs{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-l)}
.errs li{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:24px;padding:18px 0;border-bottom:1px solid var(--rule-l)}
.errs li b{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.2;text-decoration:line-through;text-decoration-color:var(--gold);text-decoration-thickness:1px}
.errs li span{font-size:15px;color:var(--mute-l)}
@media (max-width:620px){.errs li{grid-template-columns:1fr;gap:6px}}

/* Open vs closed funnel */
.funnel{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(16px,3vw,40px);align-items:center;border:1px solid var(--rule-l);padding:clamp(22px,3vw,36px)}
.funnel > *{min-width:0}
.funnel svg{width:clamp(80px,12vw,140px);height:auto;color:var(--gold)}
.funnel .side{display:flex;flex-direction:column;gap:8px}
.funnel .side b{font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.funnel .side q{font-family:var(--serif);font-size:21px;line-height:1.3;quotes:"«" "»"}
@media (max-width:700px){.funnel{grid-template-columns:1fr}.funnel svg{transform:rotate(90deg);justify-self:center}}

/* Six keys, short cards */
.keys{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px;background:var(--rule-l);border:1px solid var(--rule-l)}
.keys article{background:var(--paper);padding:26px 24px;display:flex;flex-direction:column;gap:12px}
.keys .n{font-family:var(--serif);font-size:34px;line-height:1;color:var(--gold)}
.keys h3{font-size:22px;margin:0}
.keys p{font-size:15px;color:var(--mute-l)}
.keys q{font-family:var(--serif);font-style:italic;font-size:18px;quotes:"«" "»"}

/* Question deck */
.deck{background:var(--ink);color:var(--cream);margin-inline:calc(var(--gutter) * -0.5);padding:clamp(28px,4vw,56px)}
.deck .tabs{border-bottom-color:var(--rule-d)}
.deck .tabs [role=tab]{color:var(--mute-d)}
.deck .tabs [role=tab][aria-selected=true]{color:var(--cream);border-bottom-color:var(--gold-lt)}
.deck-head{display:flex;justify-content:space-between;gap:24px;align-items:end;flex-wrap:wrap;margin-bottom:24px}
.deck-head h2{color:var(--cream)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;padding-top:28px}
.qcard{position:relative;border:1px solid var(--rule-d);padding:22px 20px 52px;font-family:var(--serif);font-size:21px;line-height:1.3;min-height:150px;background:var(--graphite)}
.qcard .ctx{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:10px}
.copy{position:absolute;left:20px;bottom:16px;background:none;border:0;font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute-d);cursor:pointer;padding:4px 0}
.copy:hover{color:var(--gold-lt)}
.deck-foot{margin-top:24px;font-size:14px;color:var(--mute-d);max-width:66ch}

/* End-of-article CTA */
.a-end{padding-block:clamp(72px,9vw,120px)}
.a-end .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:48px;align-items:end}
.a-end .wrap > *{min-width:0}
.a-end h2{font-size:clamp(34px,4.4vw,60px);font-weight:300}
.a-end h2 em{color:var(--gold-lt)}
.a-end .side{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.next{display:block;text-decoration:none;border-top:1px solid var(--rule-d);padding-top:20px;margin-top:8px}
.next span{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute-d)}
.next b{font-family:var(--serif);font-weight:400;font-size:24px;color:var(--cream)}
@media (max-width:860px){.a-end .wrap{grid-template-columns:1fr}}

html[lang=en] .funnel .side q{quotes:"\201C" "\201D"}
html[lang=fr] .funnel .side q{quotes:"\00AB\00A0" "\00A0\00BB"}
.deck-title{margin-top:28px;color:var(--cream)}
.deck-intro{margin-top:10px;max-width:66ch}
.step-item{display:flex;flex-direction:column;gap:16px}
.step-item h3{margin:0}
.pop-in .pop-item{display:flex;flex-direction:column;gap:18px}
.pop-in .pop-item h3{font-size:clamp(28px,3vw,38px)}