@import url("fonts.css");

/* ============================================================
   Plumbing only. Nothing here is a design decision — no colour,
   no typeface, no layout. Each site writes its own visual system
   on top; this file only carries the things that must be right
   on every site and are invisible when they are.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* A sideways-scrollable page drags position:fixed elements out of view on
     phones. Clip rather than scroll. (clip, not hidden: hidden would make html
     a scroll container and break scroll-padding and sticky.) */
  overflow-x: clip;
}

body { margin: 0; }
body.is-locked { overflow: hidden; }
/* [hidden] must win. A rule like `.gallery-more { display:flex }` outranks the
   browser's own `[hidden] { display:none }`, which left an empty "Show 0 more"
   button on screen whenever a gallery had nothing further to reveal. */
[hidden] { display: none !important; }

img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Reveal-on-scroll. The JS failsafe shows everything if the observer
   never runs, so content can never be stranded invisible. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease, ease), transform .7s var(--ease, ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

@media print {
  .site-header, .lightbox, .skip-link, .gallery-more, .filters, .map-consent, .callbar { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; color: #555; }
}

/* ============================================================
   Giovanni Per Uomo — tailored menswear.
   Charcoal and bone, a hard grid, uppercase letterspaced labels,
   product photography in a strict band. Squared, no radii.
   ============================================================ */
:root {
  --bone:    #f7f6f3;
  --bone-2:  #ecebe6;
  --card:    #ffffff;
  --char:    #16161a;
  --char-2:  #232329;
  --ink:     #101014;
  --body:    #4b4b52;
  --dim:     #63636b;
  --wine:    #8a2233;
  --wine-2:  #6d1a28;
  --hair:    #dedcd6;
  --hair-d:  #33333b;

  --display: "Noto Serif", Georgia, "Times New Roman", serif;
  --sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter: clamp(1.15rem, 4.5vw, 3.5rem);
  --wrap: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

body { background:var(--bone); color:var(--body); font-family:var(--sans); font-weight:300; font-size:1.02rem; line-height:1.75;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a { color:var(--wine); text-underline-offset:3px; }
a:hover { color:var(--wine-2); }
h1,h2,h3 { font-family:var(--display); font-weight:600; color:var(--ink); line-height:1.18; letter-spacing:-.012em; }
:focus-visible { outline:2px solid var(--wine); outline-offset:3px; }

.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.skip-link { position:absolute; left:1rem; top:-100px; z-index:300; background:var(--char); color:#fff; padding:.7rem 1.2rem; font-size:.85rem; text-decoration:none; }
.skip-link:focus { top:1rem; color:#fff; }
.label { display:block; font-size:.66rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--wine); }

/* ---------- Order bar ---------- */
.orderbar { background:var(--char); color:#c9c9d1; font-size:.8rem; }
.orderbar .wrap { display:flex; flex-wrap:wrap; gap:.3rem 1.5rem; justify-content:space-between; padding-block:.55rem; }
.orderbar a { color:#fff; text-decoration:none; font-weight:500; letter-spacing:.04em; }
.orderbar a:hover { color:#e8b9c1; }

/* ---------- Header ---------- */
.site-header { position:sticky; top:0; z-index:100; background:rgba(247,246,243,.95); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--hair); }
.header-inner { display:flex; align-items:center; gap:1.4rem; min-height:80px; position:relative; }
.brand { margin-right:auto; display:inline-flex; align-items:center; text-decoration:none; }
.brand img { height:38px; width:auto; }
.nav { display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.25rem); }
.nav a { font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); text-decoration:none; padding-block:.4rem; position:relative; }
.nav a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--wine); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease); }
.nav a:hover::after, .nav a[aria-current="true"]::after { transform:scaleX(1); }
.nav-toggle { display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer; padding:0; align-items:center; justify-content:center; }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--ink); position:relative; }
.nav-toggle span::before,.nav-toggle span::after { content:""; position:absolute; left:0; width:22px; height:2px; background:var(--ink); transition:transform .3s var(--ease), top .2s var(--ease); }
.nav-toggle span::before { top:-7px; } .nav-toggle span::after { top:7px; }
.site-header.is-open .nav-toggle span { background:transparent; }
.site-header.is-open .nav-toggle span::before { top:0; transform:rotate(45deg); }
.site-header.is-open .nav-toggle span::after { top:0; transform:rotate(-45deg); }
@media (max-width:840px) {
  .nav-toggle { display:inline-flex; }
  .nav { position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--bone); border-top:1px solid var(--hair); padding:0 var(--gutter) 1.25rem; max-height:0; overflow:hidden; visibility:hidden; transition:max-height .35s var(--ease), visibility .35s; }
  .site-header.is-open .nav { max-height:70vh; visibility:visible; overflow-y:auto; }
  .nav a { font-size:.88rem; padding:1rem 0; border-bottom:1px solid var(--hair); }
  .nav a::after { display:none; }
}

/* ---------- Opening ---------- */
.opening { background:var(--char); color:#c3c3cb; }
.opening .wrap { padding-block:clamp(3rem,8vw,5.5rem); display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width:880px) { .opening .wrap { grid-template-columns:1fr; } }
.opening .label { color:#e8b9c1; }
.opening h1 { color:#fff; margin-top:1.1rem; font-size:clamp(1.9rem,5vw,3.3rem); max-width:16ch; }
.opening p { margin-top:1.2rem; max-width:46ch; }
.opening .cta { margin-top:2rem; display:flex; flex-wrap:wrap; gap:.7rem; }
.opening-art img { width:100%; aspect-ratio:4/5; object-fit:cover; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.7rem; border:1px solid transparent; font-size:.76rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease); }
.btn svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn--light { background:#fff; color:var(--ink); } .btn--light:hover { background:#e8b9c1; color:var(--ink); }
.btn--outline-d { border-color:rgba(255,255,255,.4); color:#fff; } .btn--outline-d:hover { border-color:#fff; background:rgba(255,255,255,.1); color:#fff; }
.btn--dark { background:var(--char); color:#fff; } .btn--dark:hover { background:var(--wine); color:#fff; }
.btn--line { border-color:var(--hair); color:var(--ink); } .btn--line:hover { border-color:var(--wine); color:var(--wine); }

/* ---------- Sections ---------- */
.section { padding-block:clamp(3rem,7vw,5.5rem); }
.section--bone2 { background:var(--bone-2); }
.sec-head { max-width:48rem; margin-bottom:clamp(1.75rem,4vw,2.75rem); }
.sec-head h2 { margin-top:1rem; font-size:clamp(1.55rem,3.4vw,2.3rem); }
.sec-head p { margin-top:.9rem; }

/* ---------- Range: two-level category grid ---------- */
.range { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); }
.range > div { background:var(--card); padding:1.5rem 1.6rem 1.7rem; }
.range h3 { font-size:1.15rem; }
.range ul { list-style:none; margin-top:.8rem; display:grid; gap:.3rem; }
.range li { font-size:.92rem; color:var(--dim); position:relative; padding-left:.95rem; }
.range li::before { content:""; position:absolute; left:0; top:.72rem; width:5px; height:1px; background:var(--wine); }

/* ---------- Product band ---------- */
.band { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); }
.tile { position:relative; display:block; padding:0; border:0; cursor:zoom-in; overflow:hidden; background:var(--card); aspect-ratio:4/5; }
.tile img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.tile:hover img,.tile:focus-visible img { transform:scale(1.04); }
.tile[hidden] { display:none; }
.tile.is-entering { animation:tileIn .35s var(--ease) both; }
@keyframes tileIn { from{opacity:0} to{opacity:1} }
.band-note { margin-top:1.1rem; font-size:.85rem; color:var(--dim); }

/* ---------- Visit ---------- */
.visit { background:var(--char); color:#c3c3cb; }
.visit .wrap { padding-block:clamp(3rem,7vw,5rem); }
.visit h2 { color:#fff; font-size:clamp(1.6rem,3.6vw,2.4rem); }
.visit .label { color:#e8b9c1; }
.vlines { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:var(--hair-d); border:1px solid var(--hair-d); margin-top:2rem; }
.vlines > div { background:var(--char-2); padding:1.4rem 1.5rem; }
.vlines .k { display:block; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:#8d8d97; margin-bottom:.4rem; }
.vlines a, .vlines .v { color:#fff; font-family:var(--display); font-weight:500; font-size:1.15rem; text-decoration:none; }
.vlines a:hover { color:#e8b9c1; }
.vsocial { margin-top:1.5rem; display:flex; gap:.6rem; flex-wrap:wrap; }
.vsocial a { display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--hair-d); padding:.6rem 1.2rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; text-decoration:none; transition:border-color .2s var(--ease), color .2s var(--ease); }
.vsocial a:hover { border-color:#e8b9c1; color:#e8b9c1; }
.vsocial svg { width:15px; height:15px; fill:currentColor; }

/* ---------- Footer ---------- */
.site-footer { padding-block:2rem; font-size:.8rem; color:var(--dim); border-top:1px solid var(--hair); }
.footer-inner { display:flex; flex-wrap:wrap; gap:.8rem 2rem; align-items:center; justify-content:space-between; }
.site-footer img { height:28px; width:auto; }
.footer-links { display:flex; gap:1.4rem; list-style:none; flex-wrap:wrap; }
.site-footer a { color:var(--ink); text-decoration:none; }
.site-footer a:hover { color:var(--wine); }

/* ---------- Lightbox ---------- */
.lightbox { position:fixed; inset:0; z-index:300; display:none; background:rgba(12,12,15,.97); opacity:0; transition:opacity .25s var(--ease); }
.lightbox.is-open { display:block; } .lightbox.is-visible { opacity:1; }
.lb-stage { position:absolute; inset:0; display:grid; place-items:center; padding:clamp(3.5rem,8vw,5rem) clamp(1rem,7vw,5.5rem); }
.lb-figure { margin:0; display:grid; place-items:center; gap:1rem; max-width:100%; max-height:100%; }
.lb-img { max-width:100%; max-height:calc(100svh - 11rem); width:auto; height:auto; object-fit:contain; transition:opacity .2s var(--ease); }
.lb-img.is-loading { opacity:.35; }
.lb-caption { color:rgba(255,255,255,.6); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; text-align:center; max-width:60ch; }
.lb-btn { position:absolute; z-index:2; display:grid; place-items:center; width:46px; height:46px; cursor:pointer; background:transparent; border:1px solid rgba(255,255,255,.3); color:#fff; transition:background-color .2s var(--ease), border-color .2s var(--ease); }
.lb-btn:hover { background:rgba(255,255,255,.12); border-color:#fff; }
.lb-btn:disabled { opacity:.3; cursor:default; }
.lb-btn svg { width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lb-close { top:clamp(1rem,3vw,1.7rem); right:clamp(1rem,3vw,1.7rem); }
.lb-prev { left:clamp(.5rem,2.4vw,1.7rem); top:50%; transform:translateY(-50%); }
.lb-next { right:clamp(.5rem,2.4vw,1.7rem); top:50%; transform:translateY(-50%); }
.lb-counter { position:absolute; top:clamp(1rem,3vw,1.8rem); left:50%; transform:translateX(-50%); font-size:.72rem; letter-spacing:.22em; color:rgba(255,255,255,.55); }
@media (max-width:640px) { .lb-prev{left:.4rem} .lb-next{right:.4rem} .lb-btn{width:42px;height:42px} .lb-img{max-height:calc(100svh - 9rem)} }
.visit .mt-h { margin-top:1rem; }