/* Shared shell for the secondary pages (case study, skill, game). */
body.subpage { cursor: auto; }
body.subpage a, body.subpage button { cursor: pointer; }
.page-head { max-width: 1240px; margin: 0 auto; padding: 150px 40px 40px; }
.page-head .back { display: inline-flex; gap: 8px; color: var(--muted); font-size: 14px; margin-bottom: 28px; transition: color .2s; }
.page-head .back:hover { color: var(--text); }
.page-head h1 { font-size: clamp(44px, 8vw, 104px); line-height: .95; letter-spacing: -0.05em; margin: 14px 0 20px; }
.page-head .lead { color: var(--muted); font-size: clamp(18px, 2vw, 22px); max-width: 720px; }
body.subpage main section { padding-top: 20px; }
body.subpage .sec-bar { display: none; }
body.subpage footer { margin-top: 60px; }

/* ---------- Case study ---------- */
.cs-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 48px; background: var(--border); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.cs-meta div { background: var(--bg-2); padding: 18px 20px; }
.cs-meta dt { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.cs-meta dd { font-weight: 500; }

.cs-strip { display: flex; gap: 20px; overflow-x: auto; padding: 40px max(40px, calc((100% - 1240px) / 2 + 40px)) 30px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.cs-strip figure { flex: none; width: 230px; margin: 0; scroll-snap-align: center; }
.cs-strip img { width: 100%; border-radius: 26px; border: 6px solid #15151d; box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); transition: transform .5s var(--ease); }
.cs-strip figure:hover img { transform: translateY(-8px) rotate(-1deg); }
.cs-strip figcaption { color: var(--muted); font-size: 13px; margin-top: 12px; text-align: center; }

.cs-body { max-width: 760px; margin: 0 auto; padding: 40px 20px; }
.cs-body h2 { font-size: 13px; font-family: "JetBrains Mono", monospace; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; margin: 64px 0 16px; }
.cs-body h3 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 16px; }
.cs-body p { font-family: "Newsreader", Georgia, serif; font-size: clamp(19px, 2vw, 21px); line-height: 1.7; color: #d9d9e6; margin-bottom: 18px; }
.cs-body code { font-family: "JetBrains Mono", monospace; font-size: .8em; padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,.07); color: var(--accent-2); }
.cs-steps { list-style: none; counter-reset: s; display: grid; gap: 14px; margin: 8px 0 20px; }
.cs-steps li { counter-increment: s; position: relative; padding: 18px 20px 18px 64px; border-radius: 16px; background: var(--card); border: 1px solid var(--border); color: var(--text-2, #c9c9d8); line-height: 1.55; }
.cs-steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 20px; top: 18px; font: 600 13px "JetBrains Mono", monospace; color: var(--accent-2); }
.cs-steps b { color: var(--text); }
.cs-quote { margin: 40px 0; padding: 28px 30px; border-radius: 20px; border-left: 3px solid var(--accent-2); background: linear-gradient(90deg, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent); font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: clamp(21px, 2.4vw, 26px); line-height: 1.45; }
.cs-numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0; }
.cs-numbers div { padding: 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--border); }
.cs-numbers b { display: block; font: 600 34px "JetBrains Mono", monospace; letter-spacing: -0.04em; }
.cs-numbers span { color: var(--muted); font-size: 13px; }
.cs-cta { margin: 72px 0 20px; padding: 32px; border-radius: 24px; background: var(--card); border: 1px solid var(--border); text-align: center; }
.cs-cta p { font-family: "Space Grotesk", sans-serif; font-size: 22px; color: var(--text); letter-spacing: -0.02em; }
.cs-cta .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

/* link to the case study from the home card */
.card-link { display: inline-flex; gap: 8px; margin-top: 18px; color: var(--accent-2); font-weight: 600; font-size: 15px; }
.card-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.more-links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.more-link { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px; border-radius: 20px; background: var(--card); border: 1px solid var(--border); transition: border-color .3s, transform .4s var(--ease); }
.more-link:hover { border-color: var(--accent-2); transform: translateY(-4px); }
.more-link b { display: block; font-size: 18px; letter-spacing: -0.02em; }
.more-link span { color: var(--muted); font-size: 14px; }
.more-link i { font-style: normal; font-size: 22px; color: var(--accent-2); }

@media (max-width: 800px) {
  .page-head { padding: 120px 20px 24px; }
  .cs-meta { grid-template-columns: 1fr 1fr; }
  .cs-numbers { grid-template-columns: 1fr; }
  .cs-strip { padding: 24px 20px; }
  .cs-strip figure { width: 190px; }
  .more-links { grid-template-columns: 1fr; }
}

/* ---------- Project detail sheet ---------- */
.pd-open-btn {
  align-self: flex-start; margin-top: 16px; display: inline-flex; gap: 8px; align-items: center;
  padding: 11px 18px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent-2) 50%, transparent);
  background: color-mix(in srgb, var(--accent-2) 10%, transparent); color: var(--text); font: inherit; font-weight: 600; font-size: 14px;
  transition: background .25s, transform .25s var(--ease);
}
.pd-open-btn:hover { background: color-mix(in srgb, var(--accent-2) 22%, transparent); transform: translateY(-2px); }
html.pd-open { overflow: hidden; }

dialog.pd {
  /* the global "* { margin: 0 }" reset kills the dialog's auto centering: restore it */
  margin: auto; inset: 0;
  width: min(1080px, calc(100vw - 40px)); height: min(680px, calc(100vh - 60px)); max-width: none; max-height: none; padding: 0;
  border: 1px solid rgba(255,255,255,.1); border-radius: 28px; background: #0a0a11; color: var(--text); overflow: hidden;
  box-shadow: 0 50px 140px -40px color-mix(in srgb, var(--pd) 70%, transparent);
}
dialog.pd[open] { animation: pdIn .45s var(--ease); }
@keyframes pdIn { from { opacity: 0; transform: translateY(20px) scale(.98); } }
dialog.pd::backdrop { background: rgba(4,4,8,.72); backdrop-filter: blur(8px); }
.pd-shell { position: relative; height: 100%; display: grid; grid-template-columns: 340px minmax(0, 1fr); }

.pd-close { position: absolute; z-index: 3; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--text); font-size: 15px; transition: border-color .2s, background .2s; }
.pd-close:hover { border-color: var(--pd); background: rgba(255,255,255,.08); }

.pd-side {
  display: flex; flex-direction: column; gap: 16px; padding: 30px 26px 26px; overflow-y: auto;
  background: radial-gradient(140% 90% at 0% 0%, color-mix(in srgb, var(--pd) 26%, transparent), transparent 60%), #0d0d16;
  border-right: 1px solid rgba(255,255,255,.07);
}
.pd-kind { align-self: flex-start; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--pd); padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--pd) 14%, transparent); }
.pd-side h2 { font-size: clamp(30px, 3.4vw, 40px); line-height: 1.02; letter-spacing: -0.045em; }
.pd-what { color: #c9c9d8; font-size: 15.5px; line-height: 1.55; }
.pd-facts { display: grid; gap: 10px; }
.pd-facts div { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); }
.pd-facts dt { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
.pd-facts dd { font-size: 14px; line-height: 1.45; color: #dcdce8; }
.pd-actions { margin-top: auto; display: grid; gap: 8px; }
.pd-actions .btn { justify-content: center; font-size: 14px; padding: 12px 16px; color: var(--text); }
.pd-actions .btn.primary { color: #fff; }

.pd-main { display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.pd-tabs { position: relative; display: flex; gap: 4px; padding: 18px 70px 0 26px; border-bottom: 1px solid rgba(255,255,255,.07); }
.pd-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 12px 14px 14px; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 600; font-size: 15px; transition: color .2s; }
.pd-tabs button small { font: 600 11px "JetBrains Mono", monospace; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--muted); }
.pd-tabs button[aria-selected="true"] small { background: color-mix(in srgb, var(--pd) 20%, transparent); color: var(--text); }
.pd-tabs button:hover, .pd-tabs button[aria-selected="true"] { color: var(--text); }
.pd-tabs button:focus-visible { outline: 2px solid var(--pd); outline-offset: -4px; border-radius: 10px; }
.pd-ink { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--pd); border-radius: 2px; transition: transform .45s var(--ease), width .45s var(--ease); }
.pd-body { overflow-y: auto; overscroll-behavior: contain; padding: 24px 26px 28px; min-height: 0; }
.pd-pane.on > * > li, .pd-pane.on .pd-group { animation: pdUp .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes pdUp { from { opacity: 0; transform: translateY(8px); } }

.pd-does { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-does li { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); }
.pd-does li > span { flex: none; font-size: 12px; color: var(--pd); padding-top: 2px; }
.pd-does p { color: #dcdce8; font-size: 15px; line-height: 1.5; }

/* architecture: a vertical pipeline, each block linked to the next */
.pd-flow { list-style: none; display: grid; gap: 0; counter-reset: f; }
.pd-flow li { position: relative; display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: baseline; padding: 14px 16px 14px 44px; counter-increment: f; }
.pd-flow li::before { content: counter(f); position: absolute; left: 6px; top: 12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 11px "JetBrains Mono", monospace; background: color-mix(in srgb, var(--pd) 20%, #12121b); color: var(--text); border: 1px solid color-mix(in srgb, var(--pd) 50%, transparent); }
.pd-flow li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 38px; bottom: -12px; width: 2px; background: linear-gradient(color-mix(in srgb, var(--pd) 60%, transparent), transparent); }
.pd-flow li:nth-child(odd) { background: rgba(255,255,255,.02); border-radius: 12px; }
.pd-flow b { font-size: 13.5px; color: var(--text); }
.pd-flow span { color: #b9b9cc; font-size: 14.5px; line-height: 1.5; }

.pd-stack { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.pd-group { padding: 16px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); }
.pd-group h3 { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 12px; font-weight: 600; }
.pd-group ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.pd-group li { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border-radius: 10px; background: rgba(255,255,255,.05); font-size: 13.5px; }
.pd-group li:not(.has-ic) { padding-left: 10px; }
.pd-group .ic { width: 24px; height: 24px; border-radius: 7px; }

@media (max-width: 860px) {
  dialog.pd { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
  .pd-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; }
  .pd-side { overflow: visible; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.07); padding: 22px 18px 18px; }
  .pd-side h2 { padding-right: 44px; }
  .pd-actions { margin-top: 4px; }
  .pd-close { top: 14px; right: 14px; }
  .pd-main { min-height: 70dvh; }
  .pd-tabs { padding: 8px 12px 0; overflow-x: auto; scrollbar-width: none; position: sticky; top: 0; z-index: 2; background: #0a0a11; }
  .pd-tabs button { flex: none; padding: 12px 10px 14px; font-size: 14px; }
  .pd-body { overflow: visible; padding: 18px; }
  .pd-does { grid-template-columns: 1fr; }
  .pd-flow li { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Archive: expandable rows ---------- */
.item.expandable { cursor: pointer; padding-right: 56px; }
.item.expandable:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }
.item-chev {
  position: absolute; right: 16px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%;
  border: 1px solid var(--border); display: grid; place-items: center; transition: transform .45s var(--ease), border-color .3s, background .3s;
}
.item-chev::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); transition: border-color .3s; }
.item.expandable:hover .item-chev { border-color: var(--accent-2); }
.item.open .item-chev { transform: rotate(180deg); background: var(--accent-2); border-color: var(--accent-2); }
.item.open .item-chev::before { border-color: #04201c; }
.item.open::before { transform: none; }

.item-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); border-bottom: 1px solid transparent; }
.item-panel.open { grid-template-rows: 1fr; border-bottom-color: var(--border); }
.item-panel[hidden] { display: none; }
.ip-inner { overflow: hidden; min-height: 0; padding: 0 8px; }
.item-panel.open .ip-inner { padding: 4px 8px 28px; }
.item-panel.open .ip-inner > * { animation: ipIn .5s var(--ease) both; }
.item-panel.open .ip-inner > *:nth-child(2) { animation-delay: .06s; }
.item-panel.open .ip-inner > *:nth-child(3) { animation-delay: .12s; }
.item-panel.open .ip-inner > *:nth-child(4) { animation-delay: .18s; }
@keyframes ipIn { from { opacity: 0; transform: translateY(10px); } }
.ip-what { font-size: 18px; color: var(--text); max-width: 760px; margin-bottom: 18px; }
.ip-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-bottom: 16px; }
.item-panel section { padding: 16px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--border); }
.item-panel section + section { margin-top: 0; }
.ip-inner > section { margin-bottom: 16px; }
.item-panel h4 { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; margin-bottom: 10px; }
.item-panel ul { list-style: none; display: grid; gap: 6px; }
.item-panel li { position: relative; padding-left: 16px; color: #d4d4e0; font-size: 14.5px; line-height: 1.5; }
.item-panel li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 2px; background: var(--accent-2); }
.item-panel dl { display: grid; gap: 8px; }
.item-panel dl div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; font-size: 14px; }
.item-panel dt { color: var(--muted); }
.item-panel dd { color: #d4d4e0; }
.ip-stack { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.ip-stack div { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.ip-stack span { flex-basis: 100%; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.ip-stack i { font-style: normal; font-size: 13px; padding: 4px 9px; border-radius: 7px; background: color-mix(in srgb, var(--accent-2) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent-2) 25%, transparent); }
.ip-arch { color: #c9c9d8; font-size: 15px; line-height: 1.6; }
@media (max-width: 800px) {
  .item.expandable { padding-right: 52px; }
  .item-chev { top: 26px; margin-top: 0; }
  .ip-grid { grid-template-columns: 1fr; }
  .item-panel dl div { grid-template-columns: 80px 1fr; }
}
.item.flt { animation: ipIn .45s var(--ease); }
/* Lavori page has no scroll-scrubbed GSAP: show the career line full */
.lavori-page .tl-line i { transform: scaleY(1); }
.lavori-page main > section:first-of-type { padding-top: 10px; }