/* piccini.app homepage layout (2026-09-24): sticky identity rail + scrolling work column.
   Loaded only by /index.html and /pt-br/index.html, after homepage.css. */
html{scroll-behavior:smooth}
main.shell{max-width:1320px;margin:0 auto;padding:0 40px}

/* Identity rail */
.rail .hero{padding:0}
.hero-id{display:flex;align-items:center;gap:20px;margin-bottom:22px}
.hero-id .portrait{order:0;flex:none;width:80px;height:80px;margin:0;border-radius:50%;object-fit:cover}
.hero-id .eyebrow{margin:0 0 8px;font-size:10.5px}
.hero-id h1{font-size:48px;line-height:1.02;letter-spacing:-.045em;margin:0}
.rail .intro-copy{font:16.5px/1.6 Inter,Arial,sans-serif;color:var(--ink);margin:0}
.rail .hero .actions{margin-top:18px;gap:18px}
.about{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.about h2{font:400 23px/1.2 'Source Serif 4',Georgia,serif;letter-spacing:-.02em;margin:0 0 10px}
.about p{font:14px/1.6 Inter,Arial,sans-serif;color:var(--soft);margin:0 0 10px}
.about p:last-child{margin-bottom:0}
#contact.contact-card{margin-top:22px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:10px}
#contact.contact-card h2{font:400 20px/1.2 'Source Serif 4',Georgia,serif;letter-spacing:-.02em;margin:0 0 4px}
#contact.contact-card p{font:13px/1.5 Inter,Arial,sans-serif;color:var(--soft);margin:0 0 10px;max-width:none}
.contact-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.contact-links a{display:inline-flex;align-items:center;gap:5px;font:12.5px/1.4 Inter,Arial,sans-serif}
.contact-links .line-icon{width:16px;height:16px;color:currentColor}
.contact-links .primary{padding:6px 10px;background:#17345C;color:#F7F5EF;border-radius:3px;text-decoration:none}
.dark .contact-links .primary{background:#F7F5EF;color:#17345C}

/* Work column */
.masthead{padding:0;border:0;background:var(--bg)}
.masthead nav{display:flex;align-items:center;gap:20px;flex-wrap:wrap;width:100%;font:14px Inter,Arial,sans-serif}
.masthead nav .lang[lang=en]{margin-left:auto}
.masthead nav a:not(.lang):hover{text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px}
.stream .section{padding:44px 0;border-top:1px solid var(--line);scroll-margin-top:72px}
.stream .section h2{font:400 34px/1.15 'Source Serif 4',Georgia,serif;letter-spacing:-.03em;margin:0 0 12px}
.stream .section>p{font-size:16px;line-height:1.65;max-width:680px}
#writing{border-top:0;padding-top:30px}
#writing .pub-card{display:grid;grid-template-columns:60px minmax(0,1fr);column-gap:18px;align-items:start;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px 20px;text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s}
#writing .pub-card:hover{border-color:var(--amber);box-shadow:0 10px 26px rgba(23,52,92,.10)}
#writing .pub-card:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
#writing .pub-mark{width:60px;height:60px;grid-row:1 / 4;margin:0}
#writing h3{grid-column:2;font:400 22px/1.25 'Source Serif 4',Georgia,serif;margin:0 0 2px}
#writing .pub-card p{grid-column:2;font-size:14.5px;line-height:1.55;margin:0 0 6px;max-width:none}
#writing .pub-cta{grid-column:2;font:600 13px/1.4 Inter,Arial,sans-serif;text-decoration:underline;text-underline-offset:4px}
#writing .pub-card:hover .pub-cta{text-decoration-color:var(--amber);text-decoration-thickness:2px}
/* Brasil 2030 card: the scenario's link-preview layout (text left, dotted map right) inside the publication card frame. */
#writing .pub-card+.pub-card{margin-top:14px}
#writing .pub-card.pub-card--b2030{grid-template-columns:minmax(0,1fr) 116px;column-gap:24px;align-items:center}
#writing .pub-card--b2030 .b2030-text{display:block;grid-column:1}
#writing .pub-card--b2030 h3{grid-column:auto}
#writing .pub-card--b2030 .b2030-sub{display:block;margin:0 0 6px;color:#1f5a43;font:400 16.5px/1.35 'Source Serif 4',Georgia,serif}
body.dark #writing .pub-card--b2030 .b2030-sub{color:#86c9a6}
#writing .pub-card--b2030 p{max-width:none}
#writing .pub-card--b2030 .pub-cta{display:inline-block;margin-top:2px}
#writing .pub-card--b2030 .b2030-map{grid-column:2;grid-row:1;display:block;width:116px;height:120px}
#writing .pub-card--b2030 .b2030-map img{width:100%;height:100%}
#writing .pub-card--b2030 .b2030-map .b2030-map-light,body.dark #writing .pub-card--b2030 .b2030-map .b2030-map-dark{display:block}
#writing .pub-card--b2030 .b2030-map .b2030-map-dark,body.dark #writing .pub-card--b2030 .b2030-map .b2030-map-light{display:none}
@media (max-width:600px){#writing .pub-card.pub-card--b2030{grid-template-columns:minmax(0,1fr) 72px;column-gap:14px;align-items:start}#writing .pub-card--b2030 .b2030-map{width:72px;height:75px}}

.group{margin-top:30px}
.group h3,.contributions h3{font:600 11.5px/1.4 Inter,Arial,sans-serif!important;text-transform:uppercase;letter-spacing:.14em;color:var(--soft);margin:0 0 14px!important}
.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;text-decoration:none;color:var(--ink);background:var(--bg);transition:border-color .15s,transform .15s,box-shadow .15s}
.card:hover{border-color:var(--amber);transform:translateY(-2px);box-shadow:0 10px 26px rgba(23,52,92,.10)}
.card:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.thumb{display:block;aspect-ratio:16/9;background:var(--panel);border-bottom:1px solid var(--line);overflow:hidden}
.thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.card:hover .thumb img{transform:scale(1.03)}
.card-body{display:block;padding:14px 16px 16px}
.card strong{display:flex;align-items:center;gap:9px;font:400 21px/1.25 'Source Serif 4',Georgia,serif}
.card .card-icon{width:20px;height:20px}
.stream .card p{font:13.5px/1.5 Inter,Arial,sans-serif;color:var(--soft);margin:6px 0 0;max-width:none}
.card--featured{grid-column:1 / -1}
.card-grid--lead{margin-top:24px}
.card--featured .thumb{aspect-ratio:21/9}
.card--featured strong{font-size:26px}
#work>.actions{margin-top:24px}

#tela .tela-logo{width:112px;margin:0 0 18px}
#tela h2{max-width:none}
#tela p{font-size:16px}
#contact{padding:40px 0}
.stream .footer{border-top:1px solid var(--line)}

/* Desktop: the rail stays put, only the work column scrolls */
@media (min-width:1024px){
  main.shell{display:grid;grid-template-columns:minmax(360px,440px) minmax(0,1fr);gap:clamp(48px,6vw,96px);align-items:start}
  .rail{position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;scrollbar-width:none;padding:40px 0 28px}
  .rail::-webkit-scrollbar{display:none}
  .rail-inner{min-height:100%;display:flex;flex-direction:column}
  #contact.contact-card{margin-top:auto}
  .about{margin-bottom:18px}
  .masthead{position:sticky;top:0;z-index:5;padding:20px 0 16px;border-bottom:1px solid var(--line)}
  .nav-about,.nav-contact{display:none}
}
@media (min-width:1024px) and (max-height:880px){
  .rail{padding:24px 0 18px}
  .hero-id{margin-bottom:14px}.hero-id .portrait{width:60px;height:60px}.hero-id h1{font-size:38px}
  .rail .intro-copy{font-size:15px;line-height:1.55}
  .rail .hero .actions{margin-top:12px}
  .about{margin-top:16px;padding-top:14px}.about h2{font-size:20px;margin-bottom:6px}
  .about p{font-size:13px;line-height:1.52;margin-bottom:7px}
  .about{margin-bottom:14px}
  #contact.contact-card{padding:12px 14px}#contact.contact-card h2{font-size:18px}#contact.contact-card p{font-size:12.5px;margin-bottom:8px}
}
@media (min-width:1024px) and (max-height:720px){
  .rail{padding:22px 0 18px}
  .hero-id{gap:16px;margin-bottom:12px}.hero-id .portrait{width:54px;height:54px}.hero-id .eyebrow{margin-bottom:4px}.hero-id h1{font-size:34px}
  .rail .intro-copy{font-size:14.5px;line-height:1.52}
  .rail .hero .actions{margin-top:10px}.rail .hero .actions a{font-size:13px}
  .about{margin-top:14px;padding-top:12px}.about h2{font-size:19px;margin-bottom:6px}
  .about p{font-size:12.75px;line-height:1.5;margin-bottom:6px}
  .about{margin-bottom:14px}
  #contact.contact-card{padding:10px 12px}#contact.contact-card h2{font-size:17px}#contact.contact-card p{display:none}
  .contact-links{gap:6px 12px}.contact-links a{font-size:12px}.contact-links .primary{padding:5px 10px}
}
@media (min-width:1024px) and (max-height:580px){
  .rail{position:static;height:auto;overflow:visible}
}

/* Tablet and phone: one column, About after the work */
@media (max-width:1023px){
  main.shell{display:flex;flex-direction:column;padding:0 28px}
  .rail,.rail-inner,.stream{display:contents}
  .masthead{order:0;padding:20px 0;border-bottom:1px solid var(--line)}
  .rail .hero{order:1;padding:34px 0 36px}
  #writing{order:2;border-top:1px solid var(--line);padding-top:36px}
  #work{order:3}
  #about{order:4}
  .about{margin:0;padding:40px 0;border-top:1px solid var(--line)}
  .about h2{font-size:30px}
  .about p{font-size:16px}
  #tela{order:5}#contact{order:6}.stream .footer{order:7}
  #contact.contact-card{margin:0 0 36px;padding:22px}
  #contact.contact-card h2{font-size:26px;margin-bottom:6px}#contact.contact-card p{font-size:15px}
  .contact-links a{font-size:14px}.contact-links .primary{padding:10px 14px}
  .masthead nav{gap:10px 16px;font-size:13px}
  .masthead nav .lang[lang=en]{margin-left:0}
}
@media (max-width:600px){
  main.shell{padding:0 20px}
  .hero-id .portrait{width:68px;height:68px}.hero-id h1{font-size:38px}
  .rail .intro-copy{font-size:17px}
  .stream .section h2{font-size:30px}
  #writing .pub-card{padding:14px 16px;grid-template-columns:48px minmax(0,1fr);column-gap:14px}
  #writing .pub-mark{width:48px;height:48px}
  .card-grid{grid-template-columns:1fr;gap:12px}
  .card{flex-direction:row}
  .card .thumb{width:112px;flex:none;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--line)}
  .card .thumb{position:relative;min-height:84px}
  .card .thumb img{position:absolute;inset:0}
  .card--featured{flex-direction:column}
  .card--featured .thumb{width:auto;aspect-ratio:16/9;border-right:0;border-bottom:1px solid var(--line)}
  .card-body{padding:12px 14px}
  .card strong,.card--featured strong{font-size:18px}
  .card .card-icon{width:17px;height:17px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card,.thumb img{transition:none}.card:hover{transform:none}.card:hover .thumb img{transform:none}}