.imported-home {
/* ---------- cartellino ---------- */
.tagwrap { position: relative; display: inline-block; transform-origin: 13px 50%; transition: transform 220ms var(--ease); margin-top: -14px; margin-left: 10px; z-index: 1; }
.tagwrap::before { content: ""; position: absolute; left: 13px; top: 50%; width: 30px; height: 1.5px; background: var(--thread); transform-origin: 0 50%; transform: rotate(-128deg); z-index: 2; }
.tag { position: relative; display: flex; flex-direction: column; gap: 1px; background: var(--card); color: var(--ink); padding: 7px 12px 7px 27px; clip-path: polygon(var(--chamfer) 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%, 0 var(--chamfer)); font-family: var(--f-data); font-weight: 500; font-size: 12.5px; letter-spacing: .04em; line-height: 1.35; white-space: nowrap; }
.tag::before { content: ""; position: absolute; left: 9px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; border: 1px solid var(--ink); background: var(--paper); }
.tag small { font-weight: 400; font-size: 11.5px; color: var(--graphite); }
.tagwrap.lg .tag { font-size: 15px; padding: 10px 16px 10px 32px; }
.tagwrap.lg .tag::before { left: 11px; width: 10px; height: 10px; margin-top: -5px; }
.tagwrap.lg::before { left: 16px; }
.swing:hover .tagwrap, .tagwrap.demo:hover { transform: rotate(-3deg); }


/* ---------- metro ---------- */
.metro { background-color: var(--card); background-image:
    linear-gradient(90deg, var(--ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink) 1px, transparent 1px);
  background-size: 40px 12px, 8px 6px; background-repeat: repeat-x; background-position: 0 0, 0 0; }
.metro .wrap { min-height: 52px; padding-top: 16px; padding-bottom: 6px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 18px; text-align: center; }
.metro .sep { color: var(--graphite); }


/* tavola: shared-border grid */
.tavola { display: grid; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.tavola > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }


/* card esemplare */
.ex { display: flex; flex-direction: column; text-decoration: none; background: var(--paper); padding: 22px 22px 24px; position: relative; transition: box-shadow 220ms var(--ease); }
.ex:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.ex .ph { position: relative; aspect-ratio: 4 / 5; }
.ex .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 220ms var(--ease); }
.ex .ph img.mac { object-fit: cover; opacity: 0; }
.ex:hover .ph img.mac { opacity: 1; }
.ex .nm { margin-top: 12px; font-weight: 500; font-size: 15px; line-height: 1.3; }
.ex:hover .nm { text-decoration: underline; text-underline-offset: 4px; }
.ex .fam { font-size: 13.5px; color: var(--graphite); }
.ex .tagwrap { align-self: flex-start; }


/* S19 bordure a metro */
.s19 { background: var(--white); padding-block: var(--sec-standard); }
.s19 .head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.s19 .head h2 { font-size: var(--display-m); }
.s19-lead { color: var(--graphite); max-width: 36rem; margin-bottom: 36px; }
.trims { border-top: 1px solid var(--line); }
.trim { display: block; text-decoration: none; border-bottom: 1px solid var(--line); padding-block: 22px 16px; overflow: hidden; }
.trim .tw { display: block; width: 100%; overflow: hidden; }
.trim .tw img { display: block; width: 50%; max-width: none; flex: 0 0 50%; height: auto; object-fit: contain; object-position: center; }

.trim-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; margin-top: 14px; }
.trim-meta .nm { font-family: var(--f-display); font-size: clamp(22px, 2vw, 28px); line-height: 1.1; }
.trim:hover .nm { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.trim-meta .tagwrap { margin: 0 0 0 10px; }


/* S11 richiesta */
.s11 { background: var(--card); padding-block: var(--sec-compact); }
.s11 .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; }
.s11 p { font-family: var(--f-display); font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; flex: 1 1 360px; }
.s11 .tagwrap { margin: 0; }
.s11 .tag { background: var(--white); }


/* griglie semplici */
.home-grid { background: var(--paper); padding-block: var(--sec-standard); }
.home-grid .tavola { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .home-grid .tavola { grid-template-columns: repeat(4, 1fr); } }
.home-grid .ex .ph img:not(.mult):not(.mac) { padding: 4%; }


}

.imported-home {--paper:#f5f2ec;--white:#fff;--ink:#1d1b19;--graphite:#5e5a54;--line:#ddd6ca;--line-strong:#8f887e;--card:#e4d8c3;--thread:#b0302a;--chamfer:10px;--ease:cubic-bezier(.2,.7,.2,1);--f-data:ui-monospace,Consolas,monospace;--f-display:var(--display);--display-m:clamp(36px,4vw,56px);--sec-standard:clamp(56px,7vw,96px);--sec-compact:clamp(32px,4vw,48px)}
.imported-home .wrap{max-width:1440px;margin:auto;padding-inline:clamp(20px,4vw,56px)}
.imported-home p{margin-top:0}.imported-home .data{font-family:var(--f-data);font-size:12px;letter-spacing:.04em;font-weight:500}.imported-home .up{text-transform:uppercase}
.imported-home .head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:16px;margin-bottom:32px}.imported-home .head h2{font-size:var(--display-m);font-weight:500;margin:0;line-height:1.05}.imported-home .display{font-family:var(--display);font-weight:500}
.imported-home .tlink{border-bottom:1px solid currentColor;padding:4px 0;font-size:14px;display:inline-flex;gap:12px;align-items:center}.imported-home .tlink:hover{color:var(--bronze)}
.imported-home .btn{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:white;min-height:52px;padding:14px 26px;font-size:14px}.imported-home .btn:hover{background:#3a3733}.imported-home .mult{mix-blend-mode:multiply}
.imported-home .s11 p{margin:0}.imported-home .s11 .tagwrap{flex:none}.imported-home .home-grid .ex .ph img{padding:4%}
.home-about{padding-block:clamp(64px,8vw,112px);background:#f5f2ec}.about-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,100px);align-items:center}.about-photo{position:relative;background:#ebe4d8;aspect-ratio:1;overflow:hidden}.about-photo img{width:100%;height:100%;object-fit:contain;padding:8%;mix-blend-mode:multiply;transform:rotate(-10deg)}.about-photo-label{position:absolute;bottom:20px;left:22px;font:10px var(--f-data);letter-spacing:.12em}.about-copy h2{font-size:clamp(42px,5vw,68px);font-weight:500;line-height:1.02;margin:22px 0 28px}.about-copy>p:not(.data){color:var(--graphite);font-size:15px;line-height:1.8;max-width:480px}.about-copy .tlink{margin-top:12px}
body[data-page=home] .slide{padding-top:35px;min-height:660px}body[data-page=home] .hero-art{top:0}body[data-page=home] .hero{background:#f5f2ec}body[data-page=home] .hero h1,body[data-page=home] .hero h2{font-weight:500}body[data-page=home] .hero-bottom{justify-content:flex-start;gap:18px}body[data-page=home] .slide-arrows{margin-left:auto}body[data-page=home] .hero-online{display:inline-block;margin:20px 0 0 26px;border-bottom:1px solid var(--ink);padding-bottom:3px;font-size:14px}body[data-page=home] .slide-dot.selected:before{background:#b0302a;border-color:#b0302a}body[data-page=home] .slide-arrows .icon-button{border:1px solid #8f887e;border-radius:50%;width:40px;height:40px;font-size:18px}
.slide-progress{width:90px;height:2px;background:#ddd6ca;overflow:hidden}.slide-progress i{display:block;height:100%;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 100ms linear}
@media(max-width:767px){.about-layout{grid-template-columns:1fr;gap:36px}.about-photo{max-height:420px}.imported-home .ex{padding:16px 12px 22px}.imported-home .tag{font-size:10px;padding-right:8px}.imported-home .tag small{font-size:9px}.imported-home .ex .nm{font-size:14px}.imported-home .head{align-items:flex-start}.imported-home .metro .wrap{gap:6px 10px;padding-top:21px;padding-bottom:12px}.imported-home .metro .data{font-size:10px}.imported-home .metro .sep{display:none}.imported-home .metro .wrap>span:not(.sep){flex:1 1 100%}.imported-home .s11 .wrap{gap:26px}.imported-home .s11 p{flex-basis:100%;font-size:32px}.imported-home .s11 .btn{width:100%}.imported-home .trim-meta .nm{font-size:22px}.imported-home .trim-meta .tagwrap{margin-left:0}body[data-page=home] .slide{padding-top:26px;min-height:730px}body[data-page=home] .hero-art{top:280px;bottom:65px}body[data-page=home] .hero-online{margin:16px 0 0;display:table}body[data-page=home] .hero-bottom{gap:12px}.slide-progress{width:54px}body[data-page=home] .slide-arrows{gap:5px}body[data-page=home] .slide-arrows .icon-button{width:34px;height:34px}body[data-page=home] .hero-description{margin-bottom:22px}}
@media(prefers-reduced-motion:reduce){.imported-home *, .slide-progress i{transition:none!important}.imported-home .trim:hover .tw img{transform:none}.imported-home .swing:hover .tagwrap{transform:none}}

body[data-page=home] .slide-arrows{position:static;display:flex;opacity:1;margin-left:auto}

@media(max-width:767px){body[data-page=home] .slide{min-height:790px}body[data-page=home] .hero-art{top:335px}}

/* Envato editorial photography beside the slide copy. */
body[data-page=home] .hero-art.stock-art{width:52%;padding:45px 50px 65px 20px}body[data-page=home] .stock-art>img{display:block;width:100%;height:auto;max-height:100%;object-fit:contain;mix-blend-mode:normal;transform:none}
@media(max-width:767px){body[data-page=home] .hero-art.stock-art{width:100%;padding:20px 24px 35px;top:335px;bottom:65px}}

/* Four prominent messages spread across the ruler strip. */
.imported-home .metro .wrap.data{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;gap:16px 28px;min-height:78px;padding:26px clamp(20px,4vw,56px) 16px;font-size:clamp(12px,1.05vw,16px);font-weight:700;line-height:1.5;letter-spacing:.05em}
.imported-home .metro .sep{display:none}
@media(max-width:767px){.imported-home .metro .wrap.data{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;padding:28px 20px 20px;font-size:12px;font-weight:700;line-height:1.5;letter-spacing:.03em}}

/* Edge-to-edge trims: retain natural image proportions while panning. */
.imported-home .trim-track{display:flex;align-items:flex-start;width:200%;transform:translateX(0);transition:transform 1800ms cubic-bezier(.2,.7,.2,1)}
.imported-home .trim:hover .trim-track,.imported-home .trim:focus-visible .trim-track{transform:translateX(-4%)}
@media(prefers-reduced-motion:reduce){.imported-home .trim-track,.imported-home .trim:hover .trim-track,.imported-home .trim:focus-visible .trim-track{transform:none;transition:none}}

.home-about .about-photo.about-logo{background:#f5f2ec}.home-about .about-photo.about-logo img{transform:none;padding:12%;object-fit:contain}

/* Category heading and specimen-style labels. */
.categories .category-header h2{font-family:var(--display);font-size:clamp(36px,4vw,56px);font-weight:500;line-height:1.08;letter-spacing:-.5px;text-transform:none;order:-1;flex:1;min-width:0}
.categories .category-controls{margin-left:auto}
.imported-home .category-card .category-tag{position:absolute;left:24px;bottom:28px;margin:0;z-index:2}
.imported-home .category-tag .tag{font-size:16px;padding:12px 24px 12px 36px;line-height:1.35;letter-spacing:.03em}
.imported-home .category-tag .tag:before{left:12px;width:10px;height:10px;margin-top:-5px}
.imported-home .category-tag:before{left:17px}
.imported-home .category-card:hover .category-tag,.imported-home .category-card:focus-visible .category-tag{transform:rotate(-3deg)}
@media(max-width:767px){.categories .category-header h2{font-size:36px}.imported-home .category-card .category-tag{left:20px;bottom:22px}.imported-home .category-tag .tag{font-size:15px;padding:10px 20px 10px 34px}}
@media(prefers-reduced-motion:reduce){.imported-home .category-card:hover .category-tag,.imported-home .category-card:focus-visible .category-tag{transform:none}}

/* Compact hero: a centered composition with copy and image in the same grid. */
body[data-page=home] .slide{max-width:1200px;min-height:520px;padding:24px 40px 68px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center}
body[data-page=home] .hero-copy{padding:0;max-width:500px;align-self:center}
body[data-page=home] .hero h1,body[data-page=home] .hero h2{font-size:clamp(64px,6.2vw,88px);line-height:.98;letter-spacing:-2px;margin-bottom:20px}
body[data-page=home] .hero-description{font-size:16px;line-height:1.6;max-width:440px;margin-bottom:24px}
body[data-page=home] .hero-art{position:relative;inset:auto;width:100%;height:420px;padding:0}
body[data-page=home] .hero-art.stock-art{position:relative;inset:auto;width:100%;height:360px;padding:0}
body[data-page=home] .catalog-art .book{transform:rotate(-8deg) scale(.72);flex-shrink:0}
body[data-page=home] .catalog-art .book-back{transform:rotate(5deg) translate(28px,0) scale(.72)}
body[data-page=home] .mockup-note{bottom:2px;font-size:8px;letter-spacing:.6px}
body[data-page=home] .hero-bottom{left:max(40px,calc((100% - 1120px)/2));right:max(40px,calc((100% - 1120px)/2));bottom:20px}
body[data-page=home] .hero-online{margin-top:14px;margin-left:18px}
@media(min-width:768px) and (max-width:1100px){body[data-page=home] .slide{min-height:500px;padding-inline:30px;gap:24px}body[data-page=home] .hero h1,body[data-page=home] .hero h2{font-size:68px}body[data-page=home] .hero-art{height:380px}body[data-page=home] .hero-art.stock-art{height:300px}body[data-page=home] .catalog-art .book{transform:rotate(-8deg) scale(.64)}body[data-page=home] .catalog-art .book-back{transform:rotate(5deg) translate(28px,0) scale(.64)}}
@media(max-width:767px){body[data-page=home] .hero{min-height:0}body[data-page=home] .slide{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 240px;min-height:620px;padding:24px 24px 64px;gap:12px}body[data-page=home] .hero h1,body[data-page=home] .hero h2{font-size:54px;letter-spacing:-1.2px;margin-bottom:14px}body[data-page=home] .hero-description{font-size:14px;line-height:1.55;margin-bottom:18px}body[data-page=home] .hero-art,body[data-page=home] .hero-art.stock-art{position:relative;inset:auto;width:100%;height:240px;padding:0}body[data-page=home] .catalog-art .book{transform:rotate(-8deg) scale(.43)}body[data-page=home] .catalog-art .book-back{transform:rotate(5deg) translate(28px,0) scale(.43)}body[data-page=home] .mockup-note{font-size:6px;bottom:0}body[data-page=home] .hero-online{margin:14px 0 0;font-size:13px}body[data-page=home] .hero-bottom{left:24px;right:24px;bottom:16px}}

/* Larger catalogue, closer to the copy; preserve the compact hero grid. */
body[data-page=home] .catalog-art .book{transform:translate(-42px,-12px) rotate(-8deg) scale(.82)}
body[data-page=home] .catalog-art .book-back{transform:translate(-18px,-12px) rotate(5deg) scale(.82)}
body[data-page=home] .catalog-art .mockup-note{bottom:-8px;transform:translateX(-42px)}
body[data-page=home] .catalog-kicker{font-size:10px;font-weight:700;letter-spacing:.15em;color:var(--bronze);margin:0 0 10px}
body[data-page=home] .catalog-caption{font-size:12px;line-height:1.5;color:var(--muted);margin:14px 0 0;max-width:420px}
@media(min-width:768px) and (max-width:1100px){body[data-page=home] .catalog-art .book{transform:translate(-20px,-8px) rotate(-8deg) scale(.72)}body[data-page=home] .catalog-art .book-back{transform:translate(0,-8px) rotate(5deg) scale(.72)}body[data-page=home] .catalog-art .mockup-note{transform:translateX(-20px)}}
@media(max-width:767px){body[data-page=home] .catalog-art .book{transform:translateY(-6px) rotate(-8deg) scale(.49)}body[data-page=home] .catalog-art .book-back{transform:translate(18px,-6px) rotate(5deg) scale(.49)}body[data-page=home] .catalog-art .mockup-note{transform:none;bottom:-8px}body[data-page=home] .catalog-kicker{font-size:9px;margin-bottom:8px}body[data-page=home] .catalog-caption{font-size:11px;margin-top:12px}}

/* Transparent editorial cutouts based on actual catalogue products. */
body[data-page=home] .hero-art.worn-art{position:relative;inset:auto;width:100%;height:420px;padding:0;background:transparent;align-items:flex-end;justify-content:center}
body[data-page=home] .worn-art>img{display:block;width:100%;height:100%;max-height:none;object-fit:contain;object-position:center bottom;mix-blend-mode:normal;transform:none;border:0;border-radius:0;background:transparent}
@media(min-width:768px) and (max-width:1100px){body[data-page=home] .hero-art.worn-art{height:380px}}
@media(max-width:767px){body[data-page=home] .hero-art.worn-art{height:240px;margin-top:0}}

/* Slightly wider cover, retaining the current compact banner height. */
body[data-page=home] .catalog-art .book{width:380px}body[data-page=home] .catalog-art .book-back{width:370px}