/* Portfolio lavori: a project index on the left and one pinned stage on the right.
   Every project is a full-bleed layer in the stage; scrolling opens the next layer from a framed rectangle to full bleed.
   Class names carry a pf- prefix so they never meet the shared rules in style.css. */
.portfolio-index {
  --pf-top: 96px;
  --pf-vh: 100vh;
  --pf-side: 264px;
  --pf-pad: clamp(22px, 3.4vw, 54px);
  --pf-line: rgba(244, 242, 237, .12);
  --pf-deck: #11120f;
  --pf-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  background: var(--pf-deck);
  color: var(--paper);
  overflow-x: clip;
}
@supports (height: 100svh) { .portfolio-index { --pf-vh: 100svh; } }
.portfolio-index :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.pf-mono { font-family: var(--pf-mono); font-variant-numeric: tabular-nums; }
.pf-eyebrow { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.pf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pf-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--orange); transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); pointer-events: none; }

/* ---------- Side index ---------- */
.pf-side { position: fixed; z-index: 25; left: max(12px, env(safe-area-inset-left, 0px)); top: calc(var(--pf-top) + 12px); bottom: 12px; width: var(--pf-side); display: flex; flex-direction: column; gap: 18px; padding: 26px 22px 22px; border-radius: 28px; background: var(--dark); border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; transition: width .6s cubic-bezier(.7, 0, .2, 1), padding .6s cubic-bezier(.7, 0, .2, 1), box-shadow .4s; }
.pf-side-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; white-space: nowrap; }
.pf-side-head .pf-eyebrow { color: var(--muted); }
.pf-side-head .pf-mono { color: var(--orange-light); font-size: 12px; }
.pf-side-toggle { display: none; }
.pf-peek { display: none; place-items: center; width: 46px; height: 46px; flex: none; border: 1px solid var(--pf-line); border-radius: 50%; background: none; cursor: pointer; color: var(--paper); }
.pf-peek span { position: relative; width: 16px; height: 1.5px; background: currentColor; transition: background-color .3s; }
.pf-peek span::before, .pf-peek span::after { content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: currentColor; transition: transform .4s; }
.pf-peek span::before { transform: translateY(-5px); } .pf-peek span::after { transform: translateY(5px); }
.pf-side.is-peek .pf-peek span { background: transparent; }
.pf-side.is-peek .pf-peek span::before { transform: rotate(45deg); } .pf-side.is-peek .pf-peek span::after { transform: rotate(-45deg); }
.pf-peek:hover { border-color: var(--orange); color: var(--orange-light); }
.pf-side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; overflow-y: auto; scrollbar-width: none; }
.pf-side-list a { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 1px 12px; border-radius: 14px; padding: 11px 12px 13px; color: var(--muted); transition: background-color .3s, color .3s; }
/* Each project is marked by its own logo on its own colour */
.pf-thumb { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 10px; overflow: hidden; background: var(--tile); opacity: .55; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); transition: opacity .3s, box-shadow .3s; }
.pf-thumb img { display: block; width: 100%; height: 100%; box-sizing: border-box; padding: 3px; object-fit: contain; }
.pf-nm { font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .25s; }
.pf-sc { grid-column: 2; font-size: 12px; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity .25s; }
.pf-bar { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; border-radius: 2px; background: rgba(244, 242, 237, .1); overflow: hidden; opacity: 0; transition: opacity .3s; }
.pf-bar::after { content: ""; position: absolute; inset: 0; background: var(--orange); transform-origin: 0 50%; transform: scaleX(var(--fill, 0)); }
.pf-side-list a:hover { color: var(--paper); background: rgba(244, 242, 237, .04); }
.pf-side-list a:hover .pf-thumb { opacity: .9; }
.pf-side-list a[aria-current="true"] { color: var(--paper); background: rgba(244, 242, 237, .07); }
.pf-side-list a[aria-current="true"] .pf-thumb { opacity: 1; box-shadow: 0 0 0 2px var(--dark), 0 0 0 4px var(--orange); }
.pf-side-list a[aria-current="true"] .pf-bar { opacity: 1; }
.pf-side-foot { margin-top: auto; display: grid; gap: 10px; border-top: 1px solid var(--pf-line); padding-top: 18px; }
.pf-side-foot > span { color: var(--muted); font-size: 12px; }
.pf-side-foot .pf-cta { padding: 13px 16px; white-space: normal; text-align: center; background: var(--orange); color: var(--ink); }
/* On desktop the index is a slim rail of logos; the menu button opens the full list over the stage */
@media (min-width: 1001px) {
  .pf-side:not(.is-peek) { width: 72px; padding: 14px 11px; }
  .pf-side:not(.is-peek) .pf-side-head, .pf-side:not(.is-peek) .pf-side-foot { display: none; }
  .pf-side:not(.is-peek) :is(.pf-nm, .pf-sc, .pf-bar) { opacity: 0; }
  .pf-side:not(.is-peek) .pf-side-list a { padding: 7px; }
  .pf-peek { display: grid; }
  .pf-side.is-peek { box-shadow: 30px 0 80px rgba(0, 0, 0, .55); }
  /* The stage always spans the full width; the rail sits over it. The intro and closing layers leave room for it. */
  .portfolio-index .pf-showcase { padding-left: max(12px, env(safe-area-inset-left, 0px)); }
  .portfolio-index .pf-intro, .portfolio-index .pf-outro { padding-left: calc(var(--pf-pad) + 84px); }
  /* While a logo is on screen the rail slides away; the left edge of the window brings it back. */
  .pf-side { transition: transform .55s cubic-bezier(.7, 0, .2, 1), opacity .4s, width .6s cubic-bezier(.7, 0, .2, 1), padding .6s cubic-bezier(.7, 0, .2, 1), box-shadow .4s; }
  .pf-side-away .pf-side:not(.is-peek):not(:focus-within) { transform: translateX(calc(-100% - 24px)); opacity: 0; pointer-events: none; }
  .pf-side-reveal .pf-side { box-shadow: 24px 0 60px rgba(0, 0, 0, .35); }
}

/* ---------- Stage and layers ---------- */
/* Without the script the layers simply follow one another down the page. */
.pf-showcase { position: relative; padding: 12px max(12px, env(safe-area-inset-right, 0px)) 12px calc(var(--pf-side) + 24px + env(safe-area-inset-left, 0px)); transition: padding .6s cubic-bezier(.7, 0, .2, 1); }
.pf-stage { display: grid; gap: 12px; }
.pf-layer { position: relative; min-height: calc(var(--pf-vh) - var(--pf-top) - 24px); overflow: hidden; border-radius: 28px; background: var(--bg, var(--dark)); color: var(--fg, var(--paper)); }
.pf-ready .pf-stage { display: block; position: sticky; top: calc(var(--pf-top) + 12px); height: calc(var(--pf-vh) - var(--pf-top) - 24px); min-height: 460px; border-radius: 28px; overflow: hidden; background: #000; isolation: isolate; }
.pf-ready .pf-layer {
  position: absolute; inset: 0; min-height: 0; border-radius: 0;
  /* Entrance: a framed rectangle at 90% that opens to full bleed. Exit: pushed up a little and dimmed under the next layer. */
  clip-path: inset(calc((1 - var(--a, 1)) * 15%) calc((1 - var(--a, 1)) * 10%) round calc((1 - var(--a, 1)) * 28px));
  transform: translate3d(0, calc(var(--c, 0) * -6%), 0) scale(calc(.9 + var(--a, 1) * .1));
  will-change: transform, clip-path;
}
/* Dimming under the next layer: a black veil is cheaper to animate than a brightness filter */
.pf-ready .pf-layer::after { content: ""; position: absolute; inset: 0; z-index: 8; background: #000; opacity: calc(var(--c, 0) * .6); pointer-events: none; }
.pf-ready .pf-intro::after { content: none; }
.pf-ready .pf-intro { clip-path: inset(0 0 calc(var(--wipe, 0) * 100%) 0); transform: none; filter: none; }

/* Reveal helpers: --k runs 0 → 1 as the layer's timeline --t passes --at */
.pf-rv { --k: clamp(0, calc((var(--t, 1) - var(--at, 0)) * 7), 1); opacity: var(--k); transform: translate3d(0, calc((1 - var(--k)) * 22px), 0); }
.pf-wipe { --k: clamp(0, calc((var(--t, 1) - var(--at, 0)) * 6), 1); clip-path: inset(0 0 calc((1 - var(--k)) * 100%) 0); transform: translate3d(0, calc((1 - var(--k)) * .3em), 0); }
.pf-title .pf-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.pf-title .pf-ch { display: inline-block; --kc: clamp(0, calc((var(--t, 1) - var(--at, 0) - var(--i) * .012) * 10), 1); transform: translate3d(0, calc((1 - var(--kc)) * 108%), 0); }
.pf-rule { position: absolute; z-index: 2; left: var(--pf-pad); right: var(--pf-pad); top: calc(var(--pf-pad) - 16px); height: 1px; --k: clamp(0, calc((var(--t, 1) - .06) * 5), 1); background: currentColor; opacity: .22; transform-origin: 0 50%; transform: scaleX(var(--k)); }

/* ---------- Intro layer ---------- */
.pf-intro { --bg: var(--dark); display: flex; flex-direction: column; justify-content: space-between; padding: var(--pf-pad); }
.pf-intro h1 { margin: 0; font-size: clamp(64px, 11.5vw, 210px); line-height: .8; letter-spacing: -.065em; font-weight: 700; }
.pf-intro h1 em { font-style: normal; color: var(--orange); }
.pf-intro .pf-eyebrow { color: var(--muted); margin-bottom: clamp(18px, 3vw, 36px); }
.pf-intro-bottom { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: end; justify-content: space-between; }
.pf-intro-bottom p { margin: 0; max-width: 34ch; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.35; }
/* Scroll cue: the word glitches and its slices fall downwards, then it fades as soon as the intro starts to wipe away */
.pf-cue { opacity: clamp(0, calc(1 - var(--wipe, 0) * 6), 1); }
.pf-cue-text { position: relative; display: inline-block; font: 700 14px/1 var(--pf-mono); letter-spacing: .34em; text-transform: uppercase; color: var(--paper); animation: pf-cue-jitter 2.8s steps(1, end) infinite; }
.pf-cue-text::before, .pf-cue-text::after { content: attr(data-glitch-text); position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.pf-cue-text::before { color: var(--orange); clip-path: inset(8% 0 52% 0); animation: pf-cue-slice-a 2.8s steps(1, end) infinite; }
.pf-cue-text::after { color: #8ef4e7; clip-path: inset(52% 0 8% 0); animation: pf-cue-slice-b 2.8s steps(1, end) infinite; }
@keyframes pf-cue-jitter { 0%, 56%, 88%, 100% { transform: none; } 60% { transform: translate(-2px, 2px); } 66% { transform: translate(2px, 5px); } 72% { transform: translate(-1px, 9px); } 79% { transform: translate(1px, 4px); } }
@keyframes pf-cue-slice-a { 0%, 57%, 90%, 100% { opacity: 0; transform: none; } 60% { opacity: 1; transform: translate(6px, 3px); } 68% { opacity: 1; transform: translate(-4px, 9px); } 76% { opacity: 1; transform: translate(3px, 16px); } 84% { opacity: .55; transform: translate(0, 24px); } }
@keyframes pf-cue-slice-b { 0%, 59%, 92%, 100% { opacity: 0; transform: none; } 63% { opacity: .9; transform: translate(-6px, 6px); } 71% { opacity: .9; transform: translate(4px, 13px); } 80% { opacity: .9; transform: translate(-2px, 20px); } 88% { opacity: .45; transform: translate(0, 30px); } }

/* ---------- Project layer ---------- */
.pf-project { min-height: max(640px, calc(var(--pf-vh) - var(--pf-top) - 24px)); }
.pf-logo-box { position: absolute; z-index: 1; left: 50%; top: 52%; width: min(44%, calc(var(--pf-vh) - var(--pf-top) - 400px)); min-width: 220px; aspect-ratio: 1; transform: translate(-50%, -50%); }
.pf-logo, .pf-fallback { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(calc((1.18 - var(--a, 1) * .18) * (.97 + var(--q, 0) * .05))); }
.pf-logo { display: none; pointer-events: none; }
.pf-gl .pf-logo { display: block; }
.pf-gl .pf-fallback { display: none; }
.pf-fallback { object-fit: contain; }
.pf-fallback.pf-multiply { mix-blend-mode: multiply; }
/* Viewfinder corners around the mark, closing in as the layer opens */
.pf-marks { position: absolute; inset: -18px; pointer-events: none; opacity: calc(var(--a, 1) * .7); }
.pf-marks i { position: absolute; width: 22px; height: 22px; border: 0 solid currentColor; }
.pf-marks .tl { left: 0; top: 0; border-width: 1.5px 0 0 1.5px; transform: translate(calc((1 - var(--a, 1)) * -40px), calc((1 - var(--a, 1)) * -40px)); }
.pf-marks .tr { right: 0; top: 0; border-width: 1.5px 1.5px 0 0; transform: translate(calc((1 - var(--a, 1)) * 40px), calc((1 - var(--a, 1)) * -40px)); }
.pf-marks .bl { left: 0; bottom: 0; border-width: 0 0 1.5px 1.5px; transform: translate(calc((1 - var(--a, 1)) * -40px), calc((1 - var(--a, 1)) * 40px)); }
.pf-marks .br { right: 0; bottom: 0; border-width: 0 1.5px 1.5px 0; transform: translate(calc((1 - var(--a, 1)) * 40px), calc((1 - var(--a, 1)) * 40px)); }
.pf-marks span { position: absolute; font: 10px var(--pf-mono); letter-spacing: .12em; text-transform: uppercase; }
.pf-marks .hud-a { left: 30px; top: -2px; } .pf-marks .hud-b { right: 30px; bottom: -3px; }
.pf-copy, .pf-concept { position: absolute; z-index: 2; }
.pf-copy { left: var(--pf-pad); top: var(--pf-pad); right: var(--pf-pad); }
.pf-copy .pf-eyebrow { color: var(--fg-2); display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--pf-mono); }
.pf-copy .pf-eyebrow .pf-mono { color: var(--accent); }
.pf-copy h2 { margin: 14px 0 8px; font-size: clamp(40px, 5vw, 84px); line-height: .9; letter-spacing: -.055em; font-weight: 700; }
.pf-sector { margin: 0; font-size: clamp(15px, 1.3vw, 19px); color: var(--fg-2); }
.pf-concept { left: var(--pf-pad); bottom: var(--pf-pad); max-width: calc(50% - var(--pf-pad)); }
.pf-concept .pf-eyebrow { color: var(--fg-2); margin-bottom: 12px; font-family: var(--pf-mono); }
.pf-concept h3 { margin: 0 0 14px; font-weight: 700; font-size: clamp(26px, 2.4vw, 40px); line-height: 1; letter-spacing: -.04em; }
.pf-concept h3 span { display: block; }
.pf-concept h3 em { font-style: normal; color: var(--accent); }
.pf-words { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: 15px; font-weight: 700; }
.pf-more { position: absolute; z-index: 6; right: var(--pf-pad); bottom: var(--pf-pad); display: inline-flex; align-items: center; gap: 16px; border: 0; border-radius: 999px; padding: 8px 8px 8px 22px; background: var(--fg); color: var(--bg); font: 700 13px/1 Arial, Helvetica, sans-serif; letter-spacing: .02em; cursor: pointer; transition: background-color .4s, color .4s; }
.pf-more i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg); color: var(--fg); font-style: normal; font-size: 20px; line-height: 1; transition: transform .5s cubic-bezier(.7, 0, .2, 1), background-color .4s, color .4s; }
.pf-more[aria-expanded="true"] { background: var(--bg); color: var(--fg); }
.pf-more[aria-expanded="true"] i { transform: rotate(135deg); background: var(--fg); color: var(--bg); }
.pf-more[aria-expanded="true"] .pf-more-label::before { content: "Chiudi"; }
.pf-more[aria-expanded="false"] .pf-more-label::before { content: "Dettagli"; }

/* ---------- Details sheet: grows out of the button as a circle ---------- */
.pf-sheet { position: absolute; inset: 0; z-index: 5; background: var(--fg); color: var(--bg); clip-path: circle(0px at var(--ox, 90%) var(--oy, 90%)); transition: clip-path .8s cubic-bezier(.7, 0, .2, 1); overflow-y: auto; overscroll-behavior: contain; padding: var(--pf-pad) var(--pf-pad) calc(var(--pf-pad) + 64px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-content: center; }
.pf-sheet.is-open { clip-path: circle(150% at var(--ox, 90%) var(--oy, 90%)); }
.pf-sheet > * { opacity: 0; transform: translateY(28px); transition: opacity .45s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: 0s; }
.pf-sheet.is-open > * { opacity: 1; transform: none; transition-delay: calc(.28s + var(--d, 0) * .09s); }
.pf-sheet .pf-eyebrow { color: var(--sheet-muted); margin-bottom: 14px; font-family: var(--pf-mono); }
.pf-sheet-lead, .pf-sheet-side { display: grid; align-content: start; min-width: 0; }
.pf-sheet-side { gap: 28px; }
.pf-sheet-head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.pf-sheet-head img { width: 64px; height: 64px; border-radius: 14px; background: var(--bg); object-fit: contain; }
.pf-sheet-head p { margin: 0; font-size: 13px; color: var(--sheet-muted); }
.pf-sheet-head b { display: block; font-size: 20px; color: var(--bg); letter-spacing: -.02em; }
.pf-sheet h4 { margin: 0 0 20px; font-weight: 700; font-size: clamp(34px, 3.8vw, 64px); line-height: .95; letter-spacing: -.045em; }
.pf-sheet h4 em { font-style: normal; color: var(--sheet-accent); }
.pf-text { margin: 0 0 22px; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; max-width: 58ch; }
.pf-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pf-tags li { border: 1px solid currentColor; border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; }
.pf-elements { list-style: none; margin: 0; padding: 0; display: grid; }
.pf-elements li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 12px; padding: 14px 0; border-top: 1px solid var(--sheet-line); }
.pf-elements li:last-child { border-bottom: 1px solid var(--sheet-line); }
.pf-elements .pf-mono { font-size: 12px; color: var(--sheet-accent); padding-top: 3px; }
.pf-elements b { font-size: 17px; letter-spacing: -.01em; }
.pf-elements span:last-child { grid-column: 2; font-size: 14px; color: var(--sheet-muted); }
.pf-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-swatch { display: grid; justify-items: center; gap: 6px; font: 10px var(--pf-mono); color: var(--sheet-muted); }
.pf-swatch i { display: block; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .45); }
.pf-type { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.pf-cta { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 14px 24px; font-size: 12px; font-weight: 600; white-space: nowrap; transition: background-color .2s, color .2s; }
.pf-sheet .pf-cta { justify-self: start; background: var(--sheet-accent); color: var(--ink); }

/* ---------- Closing layer: the page ends here, so it also carries the footer details ---------- */
.pf-outro { --bg: var(--orange); --fg: var(--ink); display: flex; flex-direction: column; padding: var(--pf-pad); }
.pf-outro h2 { margin: 0; font-size: clamp(44px, 6.6vw, 124px); line-height: .9; letter-spacing: -.06em; font-weight: 700; }
.pf-outro h2 em { font-style: normal; color: var(--paper); }
.pf-outro-bottom { margin-top: auto; padding-top: 30px; display: flex; flex-wrap: wrap; gap: 16px 30px; align-items: end; justify-content: space-between; }
.pf-outro-bottom p { margin: 0; max-width: 40ch; font-size: 17px; line-height: 1.45; }
.pf-outro-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-outro .pf-cta { background: var(--ink); color: var(--paper); }
.pf-outro .pf-cta:hover { background: var(--paper); color: var(--ink); }
.pf-outro .pf-cta-line { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pf-outro-foot { margin-top: clamp(20px, 3vw, 34px); padding-top: 18px; border-top: 1px solid rgba(25, 26, 24, .25); display: flex; flex-wrap: wrap; gap: 10px 30px; justify-content: space-between; align-items: center; font-size: 12px; }
.pf-outro-foot b { font-size: 24px; letter-spacing: -1.4px; }
.pf-outro-foot b span { color: var(--paper); margin-left: 3px; }
.pf-to-top { border: 1px solid currentColor; border-radius: 999px; padding: 8px 14px; font-size: 12px; font-weight: 700; transition: background-color .2s, color .2s; }
.pf-to-top:hover { background: var(--ink); color: var(--paper); }

/* ---------- Narrow screens: the index becomes a bar at the bottom that opens a list ---------- */
@media (max-width: 1000px) {
  .pf-showcase { padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); padding-bottom: 80px; }
  .pf-ready .pf-stage { border-radius: 22px; height: calc(var(--pf-vh) - var(--pf-top) - 92px); }
  .pf-layer { border-radius: 22px; }
  .pf-side { top: auto; left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: auto; padding: 8px; gap: 8px; border-radius: 22px; max-height: 70vh; }
  .pf-side-head, .pf-side-foot { display: none; }
  .pf-side-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: none; border: 0; padding: 10px 12px; cursor: pointer; text-align: left; color: var(--paper); font: inherit; }
  .pf-side-toggle .pf-mono { color: var(--orange-light); font-size: 12px; margin-right: 10px; }
  .pf-side-toggle b { font-size: 15px; }
  .pf-side-toggle i { font-style: normal; font-size: 12px; color: var(--muted); border: 1px solid var(--pf-line); border-radius: 999px; padding: 6px 12px; }
  .pf-side-list { display: none; order: -1; }
  .pf-side.is-open .pf-side-list { display: grid; }
  .pf-copy h2 { font-size: clamp(38px, 10vw, 64px); }
  .pf-concept { max-width: none; right: calc(var(--pf-pad) + 150px); }
  .pf-concept h3 { font-size: 26px; }
  .pf-words { font-size: 13px; }
  .pf-logo-box { width: min(66%, 38vh); min-width: 0; top: 50%; }
  .pf-sheet { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .pf-outro-foot span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-cue-text, .pf-cue-text::before, .pf-cue-text::after { animation: none; }
  .pf-sheet, .pf-sheet > *, .pf-side, .pf-showcase { transition: none; }
}