@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,700;1,6..72,400;1,6..72,500&family=DM+Mono:wght@400;500&display=swap');

/* POPP — rivista di viaggio: giallo del logo, nero, carta crema */
:root{
  --giallo:#F8C22E;
  --giallo-scuro:#E0A90F;
  --nero:#151413;
  --carta:#F6F0E3;
  --carta-2:#EDE4D1;
  --bianco:#FFFDF8;
  --testo:#1E1C1A;
  --testo-soft:#5E5850;
  --linea:#D9CEB6;
  --accento:var(--giallo);         /* ogni articolo può cambiarlo */
  --display:"Oswald","Arial Narrow",sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --mono:"DM Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--testo);font-family:var(--serif);font-size:19px;line-height:1.6;
  background:var(--carta);
  /* grana di carta leggera */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.15 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.98;margin:0;letter-spacing:.005em;text-wrap:balance}
p{margin:0 0 1em}
::selection{background:var(--giallo);color:var(--nero)}
:focus-visible{outline:3px solid var(--nero);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding-inline:24px}
.etichetta{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}

/* ---------- logo P✈PP ---------- */
.logo{display:inline-flex;align-items:center;font-family:var(--display);font-weight:700;font-size:28px;line-height:1;letter-spacing:.02em;text-decoration:none;color:var(--nero)}
.logo svg{width:.78em;height:.95em;margin:0 .04em;fill:currentColor}
.logo-esteso{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-esteso small{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--testo-soft)}

/* ---------- testata ---------- */
.testata{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--carta) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1.5px solid var(--nero)}
.testata .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px}
.menu{display:flex;gap:26px;align-items:center}
.menu a{font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:15px;letter-spacing:.06em;text-decoration:none;position:relative}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;background:var(--giallo);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.menu a:hover::after,.menu a[aria-current="page"]::after{transform:scaleX(1)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:16px;text-decoration:none;padding:14px 24px;border:2px solid var(--nero);border-radius:999px;background:var(--giallo);color:var(--nero);box-shadow:4px 4px 0 var(--nero);transition:transform .15s,box-shadow .15s;cursor:pointer}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--nero)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--nero)}
.btn.chiaro{background:var(--bianco)}
.btn.piccolo{padding:9px 16px;font-size:14px;box-shadow:3px 3px 0 var(--nero)}
.testata-destra{display:flex;align-items:center;gap:16px}
.social{display:flex;gap:8px}
.social a{width:36px;height:36px;display:grid;place-items:center;border:1.5px solid var(--nero);border-radius:50%;color:var(--nero);background:var(--bianco);transition:background .15s,transform .15s}
.social a:hover{background:var(--giallo);transform:translateY(-2px)}
.social svg{width:18px;height:18px}
.social.grande a{width:48px;height:48px;box-shadow:3px 3px 0 var(--nero)}
.social.grande svg{width:24px;height:24px}
.social.nel-menu{display:none}
.piede-segui{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.apri-menu{display:none;background:none;border:2px solid var(--nero);border-radius:8px;padding:6px 10px;font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:14px;cursor:pointer}

@media (max-width:860px){
  .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:18px;padding:22px 24px 26px;background:var(--carta);border-bottom:1.5px solid var(--nero)}
  .menu.aperto{display:flex}
  .apri-menu{display:block}
  .testata-destra{display:none}
  .social.nel-menu{display:flex;margin-top:4px}
}

/* ---------- sezioni ---------- */
section{padding-block:96px}
.titolo-sezione{display:flex;align-items:end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:44px;border-bottom:1.5px solid var(--nero);padding-bottom:18px}
.titolo-sezione h2{font-size:clamp(40px,6vw,76px)}
.titolo-sezione p{max-width:44ch;margin:0;color:var(--testo-soft);font-style:italic;font-size:20px}

/* ---------- comparse allo scroll (CSS puro, dove supportato) ---------- */
@supports (animation-timeline:view()){
  .compari{animation:compari linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
}
@keyframes compari{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}

/* ---------- piede ---------- */
.piede{background:var(--giallo);border-top:1.5px solid var(--nero);padding-block:56px 30px}
.piede-alto{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start}
.piede h3{font-size:clamp(34px,5vw,60px);max-width:13ch}
.piede-link{display:flex;flex-direction:column;gap:8px;font-family:var(--display);text-transform:uppercase;font-weight:500;letter-spacing:.05em}
.piede-link a{text-decoration:none}
.piede-link a:hover{text-decoration:underline;text-decoration-thickness:2px}
.piede-basso{margin-top:48px;padding-top:18px;border-top:1.5px solid var(--nero);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:12.5px}

/* ---------- passaggio animato tra le pagine (View Transitions) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
::view-transition-group(*){animation-duration:.55s;animation-timing-function:cubic-bezier(.3,.7,.2,1)}
.testata{view-transition-name:testata}
.vt-albania{view-transition-name:foto-albania}

/* ---------- nastro dei numeri ---------- */
.nastro{background:var(--nero);color:var(--giallo);border-block:1.5px solid var(--nero);overflow:hidden;white-space:nowrap;font-family:var(--display);text-transform:uppercase;font-weight:500;letter-spacing:.06em;font-size:18px}
.nastro .scorre{display:inline-flex;padding-block:14px;animation:nastro 60s linear infinite}
.nastro:hover .scorre{animation-play-state:paused}
.nastro span{padding-inline:28px;display:inline-flex;align-items:center;gap:28px}
.nastro span::after{content:"✈";color:var(--carta);font-size:14px}
.nastro b{color:var(--carta);font-weight:500}
@keyframes nastro{to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}