/* =========================================================
   Betterpress Lab Roma — Foglio di stile
   Palette: carta calda, inchiostro profondo, rosso tipografico
   Fonts: Playfair Display + Inter (caricati via <link> in HTML)
   ========================================================= */

/* ---- Variabili globali ---- */
:root {
  --bg:        #faf7f1;
  --bg2:       #f0ebe0;
  --fg:        #1a1008;
  --muted:     #7a6e5f;
  --card:      #fffef9;
  --line:      #ddd5c3;
  --accent:    #8b1a1a;

  --serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:   'Inter', system-ui, -apple-system, Segoe UI, sans-serif;

  --r:     6px;
  --r-lg:  16px;
  --sh:    0 2px 12px rgba(26,16,8,.07);
  --sh-md: 0 6px 28px rgba(26,16,8,.12);

  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --hdr-h: calc(60px + var(--safe-top));
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 16px/1.65 var(--sans);
  color: var(--fg);
  background: var(--bg);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
a.ul {
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .28em;
}
img { display: block; width: 100%; height: auto; }

/* ---- Layout ---- */
.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}
.grid { display: grid; gap: 28px; }
@media (min-width: 920px) {
  .grid-2 { grid-template-columns: 1.1fr .9fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Tipografia ---- */
.h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 5.5vw, 58px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0 0 20px;
}
.h2 {
  font-family: var(--serif);
  font-size: clamp(22px, 3.8vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 14px;
}
.h3 {
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 10px;
}
.muted   { color: var(--muted); }
.lead    { font-size: 1.1rem; line-height: 1.75; color: var(--muted); }

/* ---- Sezioni ---- */
section { padding: 72px 0; }
section + section { border-top: 1px solid var(--line); }
.hero { padding: 72px 0 64px; }
.hero + section { border-top: 1px solid var(--line); }

/* ---- Figure ---- */
figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg2);
  box-shadow: var(--sh);
}
figure img {
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
figure:hover img { transform: scale(1.05); }

/* ---- Card ---- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
  padding: 28px 24px;
  transition: transform .22s ease, box-shadow .22s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}
.card-num {
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 900;
  color: var(--line);
  line-height: 1;
  display: block;
  margin: 0 0 14px;
}

/* ---- Bottoni ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .8rem 1.4rem;
  border-radius: var(--r);
  border: 1.5px solid var(--line);
  background: var(--card);
  box-shadow: var(--sh);
  font-family: var(--sans);
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: .04em;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  touch-action: manipulation;
  min-height: 44px;
  user-select: none;
  text-decoration: none;
  color: var(--fg);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}
.btn:active {
  transform: translateY(0) scale(.97);
  box-shadow: var(--sh);
}
.btn.primary {
  background: var(--fg);
  color: #fff;
  border-color: var(--fg);
}
.btn.primary:hover { background: #2e1f10; }
.btn.ghost {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.2);
}
.btn.ghost:hover { background: rgba(255,255,255,.15); }

/* ---- Social: pulsanti icona ---- */
.social-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--card);
  box-shadow: var(--sh);
  color: var(--fg);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.social-links a svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.social-links a svg .dot { fill: currentColor; stroke: none; }
.social-links a:hover,
.social-links a:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  color: #fff;
  border-color: var(--social-color, var(--accent));
  background: var(--social-color, var(--accent));
}
.social-links a:active { transform: translateY(0) scale(.96); }
.social-links a.social-instagram { --social-color: #d6249f; }
.social-links a.social-tumblr    { --social-color: #35465c; }
.social-links a.social-facebook  { --social-color: #1877f2; }

/* ---- Ornamenti tipografici ---- */
.ornament {
  display: block;
  font-family: var(--serif);
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
  opacity: .8;
}
.blockquote {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  font-style: italic;
  line-height: 1.6;
  color: var(--muted);
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 18px;
  margin: 16px 0 24px;
}
.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 48px 0 40px;
}
.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.divider span {
  font-family: var(--serif);
  color: var(--accent);
  opacity: .45;
  letter-spacing: .1em;
}
.pill {
  display: inline-block;
  padding: .28rem .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 500;
  background: var(--card);
}
.price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 12px 0 6px;
}
.price-big {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
}
.price-unit { color: var(--muted); font-size: .9rem; }
.caption { font-size: .82rem; color: var(--muted); }

/* ---- Sezione scura ---- */
.ink {
  background: var(--fg);
  color: #fff;
}
.ink .muted,
.ink .caption  { color: rgba(255,255,255,.45); }
.ink .divider::before,
.ink .divider::after { background: rgba(255,255,255,.14); }
.ink .divider span   { color: rgba(255,255,255,.3); }
.ink + section { border-top: none; }

/* Stat numerica */
.stat { text-align: center; }
.stat-n {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  line-height: 1;
  color: #fff;
}
.stat-l {
  font-size: .78rem;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: 8px;
}

/* ---- Footer ---- */
footer {
  padding: 36px 0;
  border-top: 1px solid var(--line);
}
.footer-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-brand {
  font-family: var(--serif);
  font-weight: 700;
  font-size: .95rem;
}
.footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links a {
  font-size: .82rem;
  color: var(--muted);
  transition: color .15s;
}
.footer-links a:hover { color: var(--fg); }

/* ============================================================
   HEADER
   ============================================================ */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: var(--safe-top);
  background: rgba(250,247,241,.93);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.brand img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: none;
  object-fit: cover;
  background: transparent;
  flex-shrink: 0;
}
.site-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: .96rem;
  letter-spacing: .01em;
}

/* Language switcher */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lang-switch a {
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--muted);
  transition: color .15s, background .15s;
}
.lang-switch a:hover { color: var(--fg); background: var(--bg2); }
.lang-switch a.lang-active { color: var(--fg); }
.lang-switch span { color: var(--line); font-size: .65rem; }

/* Hamburger ↔ ✕ */
.hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.hamburger:hover { background: rgba(26,16,8,.06); }
.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--fg);
  border-radius: 2px;
  transform-origin: center;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .2s;
}
/* X quando aperto */
.body--menu-open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.body--menu-open .hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.body--menu-open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   DRAWER
   ============================================================ */
.drawer {
  position: fixed;
  top: var(--hdr-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  pointer-events: none;
  visibility: hidden;
}
.drawer.open {
  pointer-events: auto;
  visibility: visible;
}
.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26,16,8,.4);
  opacity: 0;
  transition: opacity .28s ease;
}
.drawer.open .drawer-backdrop { opacity: 1; }
.drawer-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(82vw, 310px);
  background: var(--bg);
  border-right: 1px solid var(--line);
  box-shadow: 16px 0 48px rgba(26,16,8,.15);
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
  overflow-y: auto;
  padding-bottom: max(16px, var(--safe-bottom));
  display: flex;
  flex-direction: column;
}
.drawer.open .drawer-panel { transform: translateX(0); }
.drawer-head {
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}
.drawer-nav {
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 2px;
  flex: 1;
}
.drawer-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: .97rem;
  font-weight: 500;
  transition: background .14s;
}
.drawer-nav a::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .65;
}
.drawer-nav a.active::before { opacity: 1; }

/* — Home — */
.drawer-nav a[href="/"]::before,
.drawer-nav a[href="/en/index.html"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1008' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5L12 3l9 6.5V20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.5z'/%3E%3Cpath d='M9 21V12h6v9'/%3E%3C/svg%3E");
}
/* — Chi siamo / About — */
.drawer-nav a[href="/chi-siamo.html"]::before,
.drawer-nav a[href="/en/about.html"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1008' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2'/%3E%3Ccircle cx='17' cy='9' r='3'/%3E%3Cpath d='M21 21v-1.5a3 3 0 0 0-2-2.83'/%3E%3C/svg%3E");
}
/* — Workshop — */
.drawer-nav a[href="/workshops.html"]::before,
.drawer-nav a[href="/en/workshops.html"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1008' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
}
/* — Study Abroad — */
.drawer-nav a[href="/study-abroad.html"]::before,
.drawer-nav a[href="/en/study-abroad.html"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1008' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
}
/* — Gallery — */
.drawer-nav a[href="/gallery.html"]::before,
.drawer-nav a[href="/en/gallery.html"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1008' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
}
/* — Dove siamo / Find Us — */
.drawer-nav a[href="/dove-siamo.html"]::before,
.drawer-nav a[href="/en/find-us.html"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1008' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
/* — Contatti / Contact — */
.drawer-nav a[href="/contatti.html"]::before,
.drawer-nav a[href="/en/contact.html"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1008' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M22 6L12 13 2 6'/%3E%3C/svg%3E");
}
/* — Shop — */
.drawer-nav a[href="/shop.html"]::before,
.drawer-nav a[href="/en/shop.html"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1008' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}
/* — Blog — */
.drawer-nav a[href="/blog.html"]::before,
.drawer-nav a[href="/en/blog.html"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1008' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
}
/* — Notifiche / Notifications — */
.drawer-nav a[href="/notifiche.html"]::before,
.drawer-nav a[href="/en/notifications.html"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1008' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
}

.drawer-nav a:hover  { background: var(--bg2); }
.drawer-nav a.active {
  background: rgba(139,26,26,.09);
  color: var(--accent);
  font-weight: 700;
}
.drawer-sep {
  height: 1px;
  background: var(--line);
  margin: 6px 0;
}
.body--menu-open { overflow: hidden; }

/* ============================================================
   RULLO TIPOGRAFICO — animazione homepage hero
   Movimento e reveal controllati interamente via JS (requestAnimationFrame)
   ============================================================ */

.roller-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

/* JS controlla top/left e opacity */
.roller-svg {
  position: absolute;
  width: 80px;
  height: calc(80px * 118 / 110); /* aspect ratio viewBox 110×118 */
  background: transparent;
  opacity: 0;
  will-change: transform;
}
@media (max-width: 919px) {
  .roller-svg {
    width: 54px;
    height: calc(54px * 118 / 110);
  }
}
@media (max-width: 480px) {
  .roller-svg {
    width: 42px;
    height: calc(42px * 118 / 110);
  }
}

/* Texture del drum: scorre in loop — simula il rotolamento */
.drum-texture {
  animation: textureScroll 0.3s linear infinite;
  will-change: transform;
}
@keyframes textureScroll {
  from { transform: translateX(0);     }
  to   { transform: translateX(-20px); }
}

/* Righe del titolo hero — ogni riga è un blocco con clip-path JS */
.h1-lines { margin: 0 0 20px; }
.h1-line {
  display: block;
  font-family: var(--serif);
  font-size: clamp(30px, 5.5vw, 58px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.015em;
  clip-path: inset(0 100% 0 0);  /* parte tutto nascosto */
  will-change: clip-path;
  transition: color .25s ease;
}
/* Rullo draggabile */
.roller-svg.draggable { cursor: grab; }
.roller-svg.draggable:active { cursor: grabbing; }

/* ============================================================
   ANIMAZIONI
   ============================================================ */

/* 1. Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.d1 { transition-delay: .1s; }
.d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; }

/* 2. Fade in iniziale (hero) */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.fade-up {
  opacity: 0;
  animation: fadeUp .7s ease forwards;
}
.fade-up.d1 { animation-delay: .15s; }
.fade-up.d2 { animation-delay: .3s; }
.fade-up.d3 { animation-delay: .45s; }

/* 3. Caratteri mobili — casetta compositrice */
.char-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.char {
  display: inline-block;
  animation: charDrop .5s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes charDrop {
  0%   { opacity: 0; transform: translateY(-.8em) rotate(-5deg) scale(.9); }
  65%  { transform: translateY(.05em) rotate(.5deg) scale(1.02); }
  100% { opacity: 1; transform: none; }
}

/* 4. Gallery grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.gallery-grid figure { cursor: pointer; }
.gallery-grid figure img {
  aspect-ratio: 3/4;
  object-fit: cover;
}
.gallery-caption {
  padding: 10px 14px 12px;
  font-size: .8rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

/* ============================================================
   LISTA PASSAGGI (workshop)
   ============================================================ */
.step-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.step-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.step-n {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  width: 20px;
}