/* NoZap public site — title page (scheda). Layout of the mock-up of 2026-11-03, on the app's tokens. Loaded after site.css and article.css. */
.thero { position: relative; background: var(--nz-deep); color: var(--nz-ivory); overflow: hidden; }
.thero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 75% 25%; }
.thero img.side { position: absolute; right: 6%; top: 0; height: 100%; width: auto; opacity: .9; }
.thero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28,24,37,.97) 0%, rgba(28,24,37,.9) 38%, rgba(28,24,37,.3) 70%, rgba(28,24,37,.05) 100%), linear-gradient(0deg, rgba(28,24,37,.7) 0%, rgba(28,24,37,0) 30%); }
.thero .wrap { position: relative; z-index: 1; padding-block: 32px 34px; } .thero .inner { max-width: 580px; display: grid; gap: 12px; }
.crumbs { display: flex; gap: 8px; align-items: center; font: 600 12px var(--font-head); color: rgba(245,241,233,.8); } .crumbs a { color: inherit; text-decoration: none; } .crumbs a:hover { text-decoration: underline; }
.thero .chip { justify-self: start; background: none; padding: 0; font: 800 11px var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--nz-ivory); }
.ttl { display: flex; align-items: baseline; gap: 6px 18px; flex-wrap: wrap; } .thero h1 { font-weight: 800; font-size: clamp(38px, 5.6vw, 58px); line-height: 1; letter-spacing: -.045em; margin: 0; }
.hrate { display: inline-flex; align-items: center; gap: 8px; font: 14px var(--font-head); } .hrate b { font-size: 16px; } .hrate small { color: #b9b1c4; } .hrate .stars { background: rgba(255,255,255,.28); }
.thero .tmeta { margin: 0; font-size: 14px; color: #e4ddd0; } .thero .tsyn { margin: 0; font: 16px/1.5 var(--font-head); color: #e9e3d8; max-width: 520px; }
.tcta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; } .tcta .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; font-weight: 800; }
.btn.coral { background: var(--nz-coral); color: var(--nz-deep); border-radius: 0; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); } .btn.ghost { background: transparent; color: var(--nz-ivory); border: 1px solid rgba(245,241,233,.45); border-radius: 8px; } .tcta .bi svg { width: 15px; height: 15px; }
.tcap { margin: 0; font-size: 12.5px; color: rgba(245,241,233,.72); }
.thero .credit { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); bottom: 10px; z-index: 2; font-size: 11px; color: rgba(245,241,233,.7); }
.ttabs { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 4; } .ttabs .wrap { display: flex; gap: 30px; overflow-x: auto; scrollbar-width: none; } .ttabs .wrap::-webkit-scrollbar { display: none; }
.ttabs a { padding: 14px 0; font: 600 14.5px var(--font-head); color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; } .ttabs a.on, .ttabs a:hover { color: var(--ink); border-color: var(--nz-coral); }

/* layout: text column + sticky side column */
.tgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; padding-block: 40px 20px; align-items: stretch; }
.tsec { padding-block: 0 44px; scroll-margin-top: 64px; } .tsec h2, .sidecard h2, .scheda h2 { font-size: clamp(28px, 3.2vw, 38px); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; margin: 0 0 16px; }
.pp { font: 16px/1.6 var(--font-head); margin: 0 0 12px; max-width: 640px; }
.lnk { background: none; border: 0; padding: 0; margin-top: 4px; color: #c8402a; font: 700 14.5px var(--font-head); cursor: pointer; text-decoration: underline; text-decoration-color: var(--nz-coral); text-underline-offset: 4px; }
.casts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 14px; } .cc { display: block; text-decoration: none; color: var(--ink); font-family: var(--font-head); }
.cc img, .cc .ph { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 6px; background: #e9e2d4; } .cc .ph { display: grid; place-items: center; font: 800 30px var(--font-head); color: var(--muted); }
.cc b { display: block; margin-top: 8px; font-size: 15px; } .cc small { display: block; color: var(--muted); font-size: 13px; margin-top: 1px; }
.castall { margin: 4px 0 12px; padding: 0; list-style: none; columns: 2; font: 15px var(--font-head); } .castall li { padding: 3px 0; } .castall small { color: var(--muted); } .castall a { text-decoration: underline; text-decoration-color: var(--nz-coral); text-underline-offset: 3px; }
.trow { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 12px; } .trow h2 { margin: 0; } .trow > a { font: 600 14px var(--font-head); margin-left: auto; }
.ctag { color: var(--muted); font: 14px var(--font-head); } .seatag, .seasel { margin-left: auto; font: 600 14px var(--font-head); }
.seasel { padding: 10px 38px 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%231C1825' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") right 14px center no-repeat; appearance: none; -webkit-appearance: none; cursor: pointer; color: var(--ink); }
.eplist { list-style: none; margin: 0; padding: 0; } .eprow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 13px 4px; border-bottom: 1px solid var(--line); font-family: var(--font-head); }
.eprow .n { color: var(--muted); font-variant-numeric: tabular-nums; } .eprow .tt b { display: block; font-weight: 600; } .eprow .tt small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; } .eprow .du { color: var(--muted); font-size: 14px; white-space: nowrap; }
.epseason .more { display: none; } .epseason.open .more { display: grid; } .epseason .lnk { margin-top: 14px; }
.faq details { border-top: 1px solid var(--line); } .faq details:last-child { border-bottom: 1px solid var(--line); } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 4px; font: 700 16px var(--font-head); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: 22px; line-height: 1; font-weight: 400; color: var(--muted); } .faq details[open] summary::after { content: "–"; }
.faq p { margin: 0 0 16px; padding: 0 4px; font: 15.5px/1.6 var(--font-head); max-width: 640px; }

/* side column */
.tside { display: grid; gap: 34px; align-content: start; } .tside .bslot-side { top: 76px; }
.sidecard { background: var(--nz-aubergine); color: #fff; padding: 24px 22px 20px; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); scroll-margin-top: 70px; } .sidecard h2 { color: #fff; font-size: 28px; margin: 6px 0 14px; }
.eyb { color: var(--nz-coral); font: 800 11px var(--font-head); letter-spacing: .16em; text-transform: uppercase; }
.prow { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.14); color: #fff; text-decoration: none; font-family: var(--font-head); } .sidecard h2 + .prow { border-top: 0; }
.plogo { width: 52px; height: 52px; background: #fff; border-radius: 10px; display: grid; place-items: center; padding: 7px; font: 700 11px var(--font-head); color: var(--ink); text-align: center; } .plogo img { max-width: 100%; max-height: 100%; }
.pn b { display: block; font-size: 16px; } .pn small { color: #b9b1c4; font-size: 13px; } .pe svg { width: 20px; height: 20px; display: block; } .prow:hover .pe { color: var(--nz-coral); }
.snote { margin: 12px 0 0; font: 12.5px/1.45 var(--font-head); color: #b9b1c4; }
.scheda h2 { font-size: 26px; } .scheda table { width: 100%; border-collapse: collapse; font: 15px var(--font-head); } .scheda th, .scheda td { padding: 11px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .scheda th { width: 38%; font-weight: 700; } .scheda a { text-decoration: underline; text-decoration-color: var(--nz-coral); text-underline-offset: 3px; }
.tsim { padding-top: 8px; } .sims { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .sim { text-decoration: none; color: var(--ink); font-family: var(--font-head); } .sim img { width: 100%; aspect-ratio: 9/10; object-fit: cover; border-radius: 10px; display: block; margin-bottom: 8px; background: #e9e2d4; } .sim b { display: block; font-size: 15px; line-height: 1.25; }

/* ratings, comments (horizontal scroll) */
.avg { display: inline-flex; align-items: center; gap: 8px; font: 14px var(--font-head); color: var(--muted); } .avg b { color: var(--ink); }
.stars { position: relative; display: inline-block; width: 5.4em; height: 1em; font-size: 15px; line-height: 1; background: var(--line); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12' viewBox='0 0 60 12'%3E%3Cpath id='s' d='M6 0.8l1.7 3.6 3.9.5-2.9 2.7.8 3.9L6 9.6 2.5 11.5l.8-3.9L.4 4.9l3.9-.5z'/%3E%3Cuse href='%23s' x='12'/%3E%3Cuse href='%23s' x='24'/%3E%3Cuse href='%23s' x='36'/%3E%3Cuse href='%23s' x='48'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12' viewBox='0 0 60 12'%3E%3Cpath id='s' d='M6 0.8l1.7 3.6 3.9.5-2.9 2.7.8 3.9L6 9.6 2.5 11.5l.8-3.9L.4 4.9l3.9-.5z'/%3E%3Cuse href='%23s' x='12'/%3E%3Cuse href='%23s' x='24'/%3E%3Cuse href='%23s' x='36'/%3E%3Cuse href='%23s' x='48'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.stars i { position: absolute; inset: 0 auto 0 0; background: var(--nz-coral); }
.cmts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.cmt { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; } .cmt p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; }
.cmt-h { display: flex; align-items: center; gap: 10px; } .cmt-h div { min-width: 0; flex: 1; } .cmt-h b { display: block; font: 700 14.5px var(--font-head); } .cmt-h small { color: var(--muted); font-size: 12.5px; }
.av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--nz-aubergine); color: var(--nz-ivory); font: 700 15px var(--font-head); flex: none; }

/* icons in Dettagli, header menu, chevrons */
.dcell { display: flex; gap: 12px; align-items: flex-start; } .dcell .di { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: #fdeeea; color: #c8402a; } .dcell .di svg { width: 19px; height: 19px; }
.pcard .btn .bc { display: none; } .burger { display: none; }
/* comments: horizontal scroll */
.cmts { display: flex; grid-template-columns: none; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; } .cmts::-webkit-scrollbar { display: none; }
.cmt { flex: 0 0 min(340px, 82%); scroll-snap-align: start; }
.arrows { display: inline-flex; gap: 8px; margin-left: auto; } .arrows button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; } .arrows button:hover { border-color: var(--nz-coral); } .arrows svg { width: 18px; height: 18px; }
.trow .avg + .arrows { margin-left: 12px; }

@media (max-width: 920px) {
  .tgrid { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-block: 24px 8px; } .tside { display: contents; } .sidecard { order: 1; } .tmain { order: 2; } .scheda { order: 3; }
  .thero .wrap { padding-block: 24px 40px; } .thero .inner { max-width: none; } .thero::after { background: linear-gradient(0deg, rgba(28,24,37,.97) 0%, rgba(28,24,37,.86) 55%, rgba(28,24,37,.45) 100%); }
  .casts, .sims { grid-template-columns: repeat(2, minmax(0, 1fr)); } .castall { columns: 1; } .tsec { padding-bottom: 34px; }
  .ttabs .wrap { gap: 22px; } .cmt { flex-basis: 84%; } .arrows { display: none; } #commenti .trow { flex-wrap: wrap; row-gap: 8px; } #commenti .trow h2 { flex: 1 1 100%; }
  .thero .credit { bottom: 8px; }
}
@media (max-width: 520px) { .eprow { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; } .tcta .btn { padding: 11px 16px; font-size: 14px; } .seasel { margin-left: 0; } }

/* news in the text column: one row per article, thumbnail on the left */
.tmain .grid3 { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
#news .news { display: grid; grid-template-rows: none; grid-template-columns: 150px minmax(0, 1fr); align-items: stretch; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; text-decoration: none; color: var(--ink); }
#news .news .type { aspect-ratio: auto; min-height: 100px; } #news .news .type img { width: 100%; height: 100%; object-fit: cover; display: block; }
#news .news .txt { padding: 14px 16px; display: grid; align-content: center; gap: 6px; } #news .news h3 { font: 700 16px/1.3 var(--font-head); margin: 0; } #news .news small { color: var(--muted); font: 12.5px var(--font-head); }
@media (max-width: 520px) { #news .news { grid-template-columns: 108px minmax(0, 1fr); } }

.spoil { margin-top: 10px; } .spoil summary { cursor: pointer; font: 600 13.5px var(--font-head); color: #c8402a; list-style: none; } .spoil summary::-webkit-details-marker { display: none; } .spoil[open] summary { margin-bottom: 6px; } .spoil p { margin: 0; }

/* news cards (were loaded from article.css, which the title page no longer needs) */
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.news { border: 1px solid var(--line); background: var(--surface, #fff); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-rows: auto 1fr; color: inherit; text-decoration: none; }
.news .type { background: var(--nz-deep); color: var(--nz-ivory); aspect-ratio: 16/9; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.news .type img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.news .type span { position: relative; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--nz-deep); background: var(--nz-coral); align-self: flex-start; padding: 3px 9px; border-radius: 999px; }
.news .type strong { position: relative; font-size: 20px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.news .txt { padding: 14px 16px 16px; display: grid; gap: 8px; align-content: start; }
.news h3 { margin: 0; font-size: 16.5px; line-height: 1.28; font-weight: 800; text-wrap: balance; }
.news small { color: var(--muted); font-size: 12.5px; }

/* person page */
.thero .portrait { position: absolute; right: max(32px, calc((100% - 1180px) / 2 + 32px)); top: 50%; transform: translateY(-50%); width: 170px; height: 170px; object-fit: cover; object-position: top; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); }
.ribbonp { background: #fbf1dc; color: #1c1825; padding: 8px 16px; font: 13px/1.4 var(--font-head); text-align: center; }
.roles .n { font-variant-numeric: tabular-nums; } .roles .tt a { text-decoration: underline; text-decoration-color: var(--nz-coral); text-underline-offset: 3px; }
.sim small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; } .more { list-style: none; margin: 18px 0 0; padding: 0; font: 15px var(--font-head); } .more li { padding: 9px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 920px) { .thero .portrait { display: none; } }
/* person hero: the photo fills the right side of the hero, face kept in view */
.thero img.bg.pbg { left: auto; right: 0; width: 58%; object-position: 50% var(--fy, 16%); -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.55) 18%, #000 42%); mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.55) 18%, #000 42%); }
.thero.pers .credit { background: rgba(28,24,37,.68); padding: 4px 10px; border-radius: 6px; right: 16px; bottom: 12px; max-width: 46%; text-align: right; line-height: 1.35; color: #ece6da; } .thero.pers .credit a { color: #ece6da; text-decoration: underline; text-underline-offset: 2px; }
/* phones: the photo is a block above the text, fading into the dark background, credit on its corner */
@media (max-width: 920px) {
  .thero.pers.has-img::after { display: none; }
  .thero img.bg.pbg { position: relative; inset: auto; display: block; left: 0; width: 100%; height: 380px; opacity: 1; object-position: 50% var(--fym, 22%); -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); }
  .thero.pers.has-img .wrap { margin-top: -22px; padding-block: 0 40px; }
  .thero.pers .credit { top: 322px; bottom: auto; right: 12px; max-width: 78%; font-size: 10.5px; }
}