/* =========================================================
   ONYROS — HOME V1
   ========================================================= */

:root{
  --ink:#111a20;
  --ink-soft:#1a252c;
  --paper:#f6f3ee;
  --white:#ffffff;
  --muted:#647079;
  --line:rgba(17,26,32,.14);
  --blue:#087eb6;
  --blue-light:#2cb5d7;
  --warm:#d9b28a;
  --max:1280px;
  --narrow:850px;
  --shadow:0 24px 70px rgba(0,0,0,.18);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:Arial, Helvetica, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}
button,input{font:inherit}

.skip-link{
  position:fixed;
  z-index:1000;
  left:16px;
  top:-60px;
  padding:10px 15px;
  color:#fff;
  background:#000;
}
.skip-link:focus{top:16px}

.wide{
  width:min(var(--max), calc(100% - 48px));
  margin-inline:auto;
}
.narrow{
  width:min(var(--narrow), calc(100% - 48px));
  margin-inline:auto;
}
.section{padding:100px 0}
.section-kicker,
.eyebrow{
  margin:0 0 18px;
  color:var(--blue);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{
  line-height:1.08;
  letter-spacing:-.035em;
}
h2{
  margin-bottom:24px;
  font-size:clamp(2.1rem,4vw,4.3rem);
  font-weight:500;
}
h3{font-size:1.55rem}
.large-copy{
  font-size:clamp(1.1rem,1.7vw,1.35rem);
  color:#42505a;
}

/* Header */
.site-header{
  position:sticky;
  z-index:100;
  top:0;
  background:rgba(255,255,255,.93);
  border-bottom:1px solid rgba(0,0,0,.06);
  backdrop-filter:blur(16px);
}
.header-inner{
  width:min(1380px, calc(100% - 36px));
  min-height:92px;
  margin:auto;
  display:grid;
  grid-template-columns:145px 1fr auto;
  align-items:center;
  gap:28px;
}
.brand img{
  width:112px;
  height:auto;
}
.main-nav{
  display:flex;
  justify-content:center;
  gap:clamp(15px,1.8vw,30px);
}
.main-nav a,
.languages a{
  position:relative;
  text-decoration:none;
  font-size:.92rem;
  color:#46515a;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-8px;
  height:2px;
  background:var(--blue);
  transition:right .25s ease;
}
.main-nav a:hover::after,
.main-nav a.active::after{right:0}
.header-actions{
  display:flex;
  align-items:center;
  gap:22px;
}
.languages{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.languages .active{font-weight:700;color:var(--ink)}
.cart-link{
  position:relative;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  text-decoration:none;
}
.cart-link svg{
  width:25px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.7;
}
.cart-count{
  position:absolute;
  right:-5px;
  top:-5px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  display:grid;
  place-items:center;
  border-radius:20px;
  color:#fff;
  background:var(--blue);
  font-size:.68rem;
  font-weight:700;
}
.menu-toggle{
  display:none;
  border:0;
  background:none;
  cursor:pointer;
}
.menu-toggle span{
  display:block;
  width:26px;
  height:2px;
  margin:5px;
  background:var(--ink);
}

/* Hero */
.hero{
  position:relative;
  min-height:calc(100svh - 92px);
  display:flex;
  align-items:center;
  overflow:hidden;
  color:#fff;
  background:#111a20;
}
.hero-image{
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 65% 40%, rgba(8,126,182,.22), transparent 35%),
    linear-gradient(135deg,#122331 0%,#25323a 45%,#10171c 100%),
    url("../img/primo-sguardo.jpg");
  background-size:cover;
  background-position:center 36%;
  transform:scale(1.01);
}
.hero-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(5,12,16,.86) 0%,rgba(5,12,16,.55) 42%,rgba(5,12,16,.12) 75%),
    linear-gradient(0deg,rgba(5,12,16,.52),transparent 45%);
}
.hero-content{
  position:relative;
  z-index:2;
  width:min(1380px, calc(100% - 48px));
  margin:auto;
  padding:110px 0 130px;
}
.hero .eyebrow{color:#7ed7ec}
.hero h1{
  max-width:850px;
  margin-bottom:28px;
  font-size:clamp(3.4rem,7.2vw,7.7rem);
  font-weight:400;
}
.hero-lead{
  max-width:720px;
  margin-bottom:38px;
  color:rgba(255,255,255,.85);
  font-size:clamp(1.05rem,1.8vw,1.42rem);
}
.hero-actions,
.inline-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px 22px;
}
.button{
  min-height:52px;
  padding:13px 23px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  text-decoration:none;
  font-weight:700;
  transition:.22s ease;
}
.button-primary{color:#fff;background:var(--blue)}
.button-primary:hover{background:#056c9d;transform:translateY(-2px)}
.button-ghost{
  color:#fff;
  border-color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.04);
}
.button-ghost:hover{background:#fff;color:var(--ink)}
.button-light{background:#fff;color:var(--ink)}
.button-light:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.scroll-cue{
  position:absolute;
  z-index:3;
  bottom:30px;
  left:50%;
  width:28px;
  height:44px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:20px;
  transform:translateX(-50%);
}
.scroll-cue span{
  position:absolute;
  top:8px;
  left:50%;
  width:4px;
  height:8px;
  border-radius:10px;
  background:#fff;
  transform:translateX(-50%);
  animation:scroll 1.8s infinite;
}
@keyframes scroll{
  0%{opacity:0;transform:translate(-50%,0)}
  35%{opacity:1}
  100%{opacity:0;transform:translate(-50%,14px)}
}

/* Manifesto */
.manifesto{
  text-align:center;
  background:#fff;
}
.manifesto blockquote{
  margin:0 0 26px;
  font-size:clamp(1.75rem,3.4vw,3.35rem);
  font-style:italic;
  line-height:1.25;
  letter-spacing:-.025em;
}
.manifesto p:last-child{
  max-width:720px;
  margin:0 auto;
  color:var(--muted);
  font-size:1.08rem;
}

/* Featured */
.featured-work{background:var(--paper)}
.two-columns{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);
  gap:clamp(50px,7vw,110px);
  align-items:center;
}
.art-frame{
  position:relative;
  padding:22px;
  background:#fff;
  box-shadow:var(--shadow);
}
.art-frame img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  background:#18242b;
}
.art-label{
  position:absolute;
  left:0;
  bottom:0;
  padding:10px 17px;
  color:#fff;
  background:var(--ink);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.14em;
}
.featured-copy h2{margin-bottom:12px}
.work-type{
  margin-bottom:30px;
  color:var(--blue);
  font-weight:700;
}
.work-data{
  margin:36px 0;
  border-top:1px solid var(--line);
}
.work-data div{
  padding:13px 0;
  display:grid;
  grid-template-columns:125px 1fr;
  border-bottom:1px solid var(--line);
}
.work-data dt{color:var(--muted)}
.work-data dd{margin:0;font-weight:700}
.text-link{
  position:relative;
  padding-bottom:4px;
  color:var(--ink);
  text-decoration:none;
  font-weight:800;
}
.text-link::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:2px;
  background:var(--blue);
  transform-origin:left;
  transition:transform .22s ease;
}
.text-link:hover::after{transform:scaleX(.55)}

/* Originale / edizione */
.original-and-edition{
  color:#fff;
  background:var(--ink);
}
.section-heading{
  max-width:800px;
  margin-bottom:55px;
}
.section-heading>p:last-child{color:rgba(255,255,255,.7)}
.choice-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}
.choice-card{
  position:relative;
  min-height:420px;
  padding:45px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.035);
}
.choice-card .number{
  display:block;
  margin-bottom:80px;
  color:var(--blue-light);
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.18em;
}
.choice-card p{color:rgba(255,255,255,.72)}
.choice-card ul{
  margin:28px 0 36px;
  padding-left:20px;
  color:rgba(255,255,255,.86);
}
.choice-card .text-link{color:#fff}
.accent-card{
  background:linear-gradient(145deg,#0e789f,#075576);
  border-color:transparent;
}

/* About */
.about{
  background:linear-gradient(90deg,#2b2d2f 0%,#15191c 100%);
  color:#fff;
}
.about-grid{
  display:grid;
  grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);
  align-items:center;
  gap:70px;
}
.character-wrap{
  min-height:480px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.character-wrap img{
  max-height:540px;
  filter:drop-shadow(0 30px 30px rgba(0,0,0,.25));
}
.about-copy{max-width:720px}
.about-copy p:not(.section-kicker){color:rgba(255,255,255,.76)}
.about-copy .button{margin-top:16px}

/* Values */
.values{background:#fff}
.values-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.values article{
  min-height:260px;
  padding:40px;
  background:#fff;
}
.values article>span{
  display:block;
  margin-bottom:55px;
  color:var(--blue);
  font-size:.78rem;
  font-weight:800;
}
.values p{color:var(--muted)}

/* Closing */
.closing-cta{
  padding:120px 0;
  color:#fff;
  text-align:center;
  background:
    radial-gradient(circle at 20% 20%,rgba(44,181,215,.25),transparent 30%),
    linear-gradient(135deg,#0d1a23,#071017);
}
.closing-cta h2{font-size:clamp(2.3rem,5vw,5rem)}
.closing-cta .button{margin-top:20px}

/* Footer */
.site-footer{
  padding:55px 0;
  color:rgba(255,255,255,.72);
  background:#090d10;
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:40px;
}
.footer-brand img{
  width:105px;
  margin-bottom:14px;
  filter:brightness(0) invert(1);
  opacity:.85;
}
.footer-brand p,
.footer-meta p{margin:4px 0;font-size:.85rem}
.site-footer nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px 24px;
}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:#fff}
.footer-meta{text-align:right}

/* Responsive */
@media (max-width:1120px){
  .header-inner{
    grid-template-columns:auto auto 1fr;
  }
  .menu-toggle{
    display:block;
    order:3;
    justify-self:end;
  }
  .header-actions{
    order:2;
    justify-self:end;
  }
  .main-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    padding:24px;
    display:none;
    flex-direction:column;
    align-items:center;
    gap:18px;
    background:#fff;
    border-top:1px solid var(--line);
    box-shadow:0 20px 30px rgba(0,0,0,.12);
  }
  .main-nav.open{display:flex}
  .menu-toggle{order:3}
}
@media (max-width:850px){
  .section{padding:75px 0}
  .wide,.narrow{width:min(100% - 34px,var(--max))}
  .header-inner{min-height:78px}
  .brand img{width:92px}
  .hero{min-height:780px}
  .hero-content{padding:90px 0 125px}
  .hero h1{font-size:clamp(3rem,14vw,5.7rem)}
  .hero-shade{
    background:
      linear-gradient(0deg,rgba(5,12,16,.88) 0%,rgba(5,12,16,.5) 68%,rgba(5,12,16,.22));
  }
  .two-columns,
  .about-grid{grid-template-columns:1fr}
  .featured-copy{order:-1}
  .choice-grid{grid-template-columns:1fr}
  .choice-card{min-height:auto}
  .about-grid{gap:20px}
  .character-wrap{min-height:340px}
  .character-wrap img{max-height:390px}
  .values-grid{grid-template-columns:1fr}
  .values article{min-height:auto}
  .footer-grid{
    grid-template-columns:1fr;
    text-align:center;
  }
  .footer-brand img{margin-inline:auto}
  .footer-meta{text-align:center}
}
@media (max-width:560px){
  .header-inner{
    width:calc(100% - 24px);
    grid-template-columns:auto 1fr auto;
    gap:10px;
  }
  .languages{display:none}
  .header-actions{gap:8px}
  .hero-actions,
  .inline-actions{align-items:stretch;flex-direction:column}
  .button{width:100%}
  .hero-lead br{display:none}
  .art-frame{padding:12px}
  .choice-card{padding:30px}
  .choice-card .number{margin-bottom:45px}
  .work-data div{grid-template-columns:1fr;gap:3px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}

.page-hero{color:#fff;background:linear-gradient(135deg,#121c23,#090f13)}
.compact-hero{padding:110px 0 90px}.compact-hero h1{font-size:clamp(3.5rem,8vw,7.6rem);font-weight:400}
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:50px}.filter-button{padding:10px 16px;border:1px solid var(--line);background:transparent;cursor:pointer}.filter-button.active,.filter-button:hover{color:#fff;background:var(--ink)}
.works-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:70px 34px}.work-card-image{position:relative;display:block;overflow:hidden}.work-card-image img{width:100%;aspect-ratio:4/5;object-fit:cover}.status{position:absolute;top:18px;right:18px;padding:8px 11px;color:#fff;background:rgba(9,13,16,.88);font-size:.7rem;font-weight:800}.work-card-copy{padding-top:22px}.micro-label{color:var(--blue);font-size:.7rem;font-weight:800;letter-spacing:.15em}.work-card-copy h2 a{text-decoration:none}
.work-hero{min-height:calc(100svh - 92px);display:grid;grid-template-columns:1.35fr .65fr;color:#fff;background:#10181e}.work-hero-image img{width:100%;height:100%;object-fit:cover}.work-hero-copy{padding:70px clamp(40px,5vw,90px);display:flex;flex-direction:column;justify-content:center}.work-hero-copy h1{font-size:clamp(3.3rem,7vw,7rem);font-weight:400}.work-intro{color:rgba(255,255,255,.78);font-size:1.3rem}.scroll-text{margin-top:30px;color:#fff;text-decoration:none;font-weight:700}
.work-story{text-align:center;background:#fff}.work-story blockquote{font-size:clamp(2rem,4vw,4rem);line-height:1.2}.purchase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.purchase-card{padding:45px;border:1px solid var(--line);background:#fff}.purchase-card h2{font-size:clamp(2.2rem,4vw,4rem)}.purchase-card .price{font-size:1.3rem;font-weight:800}.edition-card{color:#fff;background:linear-gradient(145deg,#0e789f,#075576);border:0}.edition-card .work-data dt{color:rgba(255,255,255,.7)}
@media(max-width:850px){.works-grid,.work-hero,.purchase-grid{grid-template-columns:1fr}.work-hero-image{min-height:60svh}}