/* Metodo · stessa direzione della home ("The printed annual"), stesso asse al 42%. */

.m-day, .m-talk, .m-roles, .m-path, .m-own {
  display: grid;
  grid-template-columns: [full-start] var(--m) [content-start] calc(42% - var(--m)) [axis] minmax(0, 1fr) [content-end] var(--m) [full-end];
}

/* Hero: the split drop on a pale band, the two halves named at its sides */
.m-band { background: var(--paper-3); position: relative; display: grid; grid-template-columns: subgrid; place-items: center; }
.pair { grid-column: full; grid-row: 1; height: 100%; display: grid; place-items: center; padding: 28px 0; }
.pair svg { height: 100%; max-height: 44svh; width: auto; overflow: visible; }
.half-b { fill: var(--petrol); transition: opacity .35s var(--ease-out); }
.half-c { fill: var(--orange); transition: opacity .35s var(--ease-out), transform 1.4s var(--ease-out); transform: translate(-1.1px, .7px); }
.m-band.is-b .half-c, .m-band.is-c .half-b { opacity: .18; }
.tag {
  grid-row: 1; align-self: center; z-index: 1;
  display: grid; gap: 2px; text-align: left;
  font: inherit; font-size: var(--s-small); color: var(--ink-soft); line-height: 1.35;
  background: none; border: 0; padding: 0; width: min(220px, 100%);
  cursor: pointer; transition: color .2s;
}
.tag strong { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.tag:hover, .tag[aria-pressed="true"] { color: var(--ink); }
.tag-c { grid-column: content-start / axis; justify-self: start; }
.tag-c strong { color: #9A4A12; }
.tag-b { grid-column: axis / content-end; justify-self: end; }
.tag-b strong { color: var(--petrol); }

/* Time split: two days in 100 points */
.m-day { padding-top: var(--gap-section); row-gap: 28px; }
.day-h { grid-column: content-start / axis; padding-right: var(--gut); }
.day-lead { grid-column: axis / content-end; align-self: end; max-width: 36ch; font-size: var(--s-lead); line-height: 1.45; }
.days { grid-column: content; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); margin-top: 56px; }
.day figcaption { display: grid; gap: 4px; margin-bottom: 24px; color: var(--ink-soft); font-size: var(--s-small); }
.day figcaption strong { color: var(--ink); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.tiles { display: block; width: 100%; max-width: 420px; height: auto; overflow: visible; }
.t { fill: var(--c); transform-box: fill-box; transform-origin: center; transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); }
.k1 { --c: var(--ink); }
.k2 { --c: #2F4749; }
.k3 { --c: #546D6F; }
.k4 { --c: #8AA19E; }
.k5 { --c: #B9C9C5; }
.k6 { --c: transparent; stroke: #546D6F; stroke-width: 1.2; }
.sw.k6 { outline: 1.5px solid #546D6F; outline-offset: -1.5px; }
.days.focus .t { opacity: .14; }
.days.focus .t.on { opacity: 1; }
.legend { display: grid; margin-top: 20px; font-size: 15px; max-width: 420px; }
.legend li { display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; align-items: center; padding: 7px 0; cursor: default; outline-offset: 2px; }
.legend li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.legend li.on { color: var(--petrol); }
.sw { width: 14px; height: 14px; background: var(--c); }
.sw.kd { background: var(--petrol); border-radius: 50% 50% 50% 0; transform: rotate(-45deg) scale(.9); }
.day-foot { grid-column: axis / content-end; max-width: 40ch; margin-top: 40px; font-size: var(--s-lead); line-height: 1.45; }

/* Dialogue */
.m-talk { padding-top: var(--gap-section); }
.talk-side { grid-column: content-start / axis; padding-right: clamp(24px, 4vw, 72px); display: grid; gap: 24px; align-content: start; padding-top: calc(var(--s-title) * 2.2 + 40px); }
.talk-lead { font-size: var(--s-lead); line-height: 1.45; max-width: 30ch; }
.talk-pic { width: min(300px, 70%); aspect-ratio: 4 / 5; overflow: clip; margin-top: 32px; }
.talk-pic img { width: 100%; height: 100%; object-fit: cover; }
.talk-col { grid-column: axis / content-end; }
.talk-col h2 { margin-bottom: 40px; }
.log { display: grid; gap: 12px; max-width: 720px; }
.say { padding: 18px 22px; font-size: 18px; line-height: 1.45; }
.say span { display: block; font-size: var(--s-small); font-weight: 600; margin-bottom: 4px; }
.say.b { background: var(--paper-2); margin-right: 56px; }
.say.b span { color: var(--petrol); }
.say.c { background: var(--petrol); color: var(--on-dark); margin-left: 56px; }
.say.c span { color: var(--on-dark-soft); }
.replay { margin-top: 24px; font: inherit; font-size: 15px; font-weight: 600; color: var(--petrol); background: none; border: 0; padding: 8px 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; cursor: pointer; }
.replay:hover { color: var(--ink); }

/* Roles: a petrol page */
.m-roles { background: var(--petrol); color: var(--on-dark); margin-top: var(--gap-section); padding: clamp(96px, 10vw, 160px) 0; row-gap: 56px; }
.roles-h { grid-column: content-start / axis; padding-right: var(--gut); }
.roles-pic { grid-column: content-start / axis; grid-row: 2 / 4; align-self: start; width: min(360px, 78%); aspect-ratio: 3 / 4; overflow: clip; }
.roles-pic img { width: 100%; height: 100%; object-fit: cover; }
.roles { grid-row: 2; grid-column: axis / content-end; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 56px); }
.role { padding-top: 8px; }
.role-mark { width: 44px; height: 44px; margin-bottom: 20px; }
.role h3 { font-size: 40px; font-weight: 600; letter-spacing: -0.03em; }
.role-where { color: var(--on-dark-soft); margin: 4px 0 20px; }
.role ul { display: grid; gap: 12px; max-width: 34ch; }
.roles-foot { grid-row: 3; grid-column: axis / content-end; font-size: var(--s-lead); line-height: 1.45; max-width: 38ch; }

/* Path */
.m-path { padding-top: var(--gap-section); }
.path-pic { grid-column: content-start / axis; padding-right: clamp(24px, 4vw, 72px); align-self: start; }
.path-pic img { width: 100%; max-width: 420px; aspect-ratio: 4 / 5; object-fit: cover; }
.path-col { grid-column: axis / content-end; }
.path-lead { font-size: var(--s-lead); line-height: 1.45; max-width: 38ch; margin: 28px 0 48px; }
.steps { display: grid; max-width: 720px; }
.steps li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 22px 0; }
.steps b { font-size: 40px; font-weight: 560; line-height: 1; color: var(--petrol); letter-spacing: -0.03em; }
.steps h3 { font-size: var(--s-lead); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
.steps p { color: var(--ink-soft); }

/* Your pair */
.m-own { padding: 0 0 var(--gap-section); row-gap: 56px; margin-top: var(--gap-section); }
.own-pic { grid-column: full; aspect-ratio: 16 / 5; overflow: clip; margin-bottom: 64px; }
.own-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.own-h { grid-column: content; }
.own-body { grid-column: content; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.own-text { grid-column: 1 / 6; display: grid; gap: 20px; align-content: start; font-size: var(--s-lead); line-height: 1.45; max-width: 36ch; }
.own-link { font-weight: 600; color: var(--petrol); text-underline-offset: 4px; text-decoration-thickness: 1px; justify-self: start; }
.own-link:hover { color: var(--ink); }
.pairs.scale { grid-column: 7 / 13; }
.pairs.scale td:nth-child(2) { white-space: nowrap; }
.pairs.scale td:last-child { max-width: 30ch; }

@media (prefers-reduced-motion: no-preference) {
  .js .m-hero .pair { opacity: 0; animation: rise 800ms var(--ease-out) 100ms forwards; }
  .js .m-band:not(.open) .half-c { transform: none; }
  .js .days .t { opacity: 0; transform: scale(.6); transition: opacity .35s var(--ease-out), transform .45s var(--ease-out); transition-delay: calc(var(--n) * 9ms); }
  .js .days.in .t { opacity: 1; transform: none; }
  .js .days.in.focus .t { opacity: .14; transition-delay: 0ms; }
  .js .days.in.focus .t.on { opacity: 1; }
  .js .log.play .say { opacity: 0; transform: translateY(12px); }
  .js .log.play .say.shown { opacity: 1; transform: none; transition: opacity .45s var(--ease-out), transform .55s var(--ease-out); }
}

@media (max-width: 1080px) {
  .talk-side { padding-top: 0; grid-column: content; grid-row: 2; margin-top: 40px; padding-right: 0; }
  .talk-col { grid-column: content; grid-row: 1; }
  .roles-h, .roles, .roles-foot { grid-column: content; }
  .roles { grid-row: 3; }
  .roles-foot { grid-row: 4; }
  .roles-pic { grid-column: content; grid-row: 2; justify-self: end; width: 46%; }
  .talk-pic { display: none; }
  .path-pic { grid-column: content; grid-row: 2; justify-self: end; width: 50%; margin-top: 56px; padding: 0; }
  .path-col { grid-column: content; }
  .own-text, .pairs.scale { grid-column: 1 / 13; }
  .pairs.scale { margin-top: 48px; }
}

@media (max-width: 720px) {
  .m-day, .m-talk, .m-roles, .m-path, .m-own {
    grid-template-columns: [full-start] var(--m) [content-start axis] minmax(0, 1fr) [content-end] var(--m) [full-end];
  }
  .m-band { grid-template-rows: 1fr auto; place-items: stretch; }
  .pair { grid-row: 1; padding: 20px 0 8px; }
  .pair svg { max-height: 28svh; justify-self: center; }
  .tag { grid-row: 2; width: auto; margin-bottom: 18px; }
  .tag strong { font-size: 22px; }
  .tag-c { grid-column: content-start; justify-self: start; width: 46%; }
  .tag-b { grid-column: content-start; justify-self: end; width: 46%; text-align: right; }
  .day-h, .day-lead, .day-foot { grid-column: content; }
  .day-h { padding-right: 0; }
  .days { grid-template-columns: 1fr; gap: 72px; margin-top: 32px; }
  .legend { font-size: 15px; }
  .say { padding: 16px 18px; font-size: 17px; }
  .say.b { margin-right: 24px; }
  .say.c { margin-left: 24px; }
  .roles { grid-template-columns: 1fr; gap: 48px; }
  .steps li { grid-template-columns: 44px 1fr; }
  .steps b { font-size: 30px; }
  .path-pic { width: 60%; }
  .own-body { grid-template-columns: minmax(0, 1fr); }
  .own-text { grid-column: 1; grid-row: 1; max-width: none; font-size: 18px; }
  .pairs.scale { grid-column: 1; grid-row: 2; }
  .pairs.scale td:nth-child(2) { white-space: normal; }
  .own-pic { aspect-ratio: 4 / 3; margin-bottom: 24px; }
  .roles-pic { width: 60%; }
}