:root{
  --ground:#f3f2f2;
  --ink:#201e1d;
  --accent:#ec3013;
  --accent-dark:#b8240d;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(236,48,19,.2)}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dark)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- struttura: flex column a tutta altezza viewport ---- */
.page{
  height:100vh;
  height:100dvh;
  padding:2.4vh 3vw;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
}

/* barre alto/basso */
.bar{
  flex:0 0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:1vh 24px;
}
.bar--top{border-bottom:2px solid var(--ink);padding-bottom:1.4vh}
.bar--bottom{align-items:center;border-top:2px solid var(--ink);padding-top:1.4vh;gap:1vh 16px}

.label{
  font-size:clamp(9px,1.3vh,13px);
  font-weight:600;letter-spacing:.3em;text-transform:uppercase;
}
.bar--top .label{font-weight:700;letter-spacing:.34em}
.label--accent{color:var(--accent);font-weight:500}

/* ---- corpo: due colonne flex che si impilano da sole ---- */
.main{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:3vh 5vw;
  padding:3vh 0;
}
.mark{
  flex:1 1 300px;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:3vh;
}
.mark img{
  display:block;width:100%;max-width:480px;
  max-height:38vh;height:auto;
  object-fit:contain;object-position:left;
}
.rule-dots{
  flex:0 0 auto;
  display:block;width:100%;max-width:480px;height:10px;
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 10px);
}

.copy{
  flex:1 1 320px;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:2.4vh;
  border-left:2px solid var(--ink);padding-left:3vw;
}
.kicker{
  font-size:clamp(9px,1.25vh,12px);
  font-weight:700;letter-spacing:.4em;text-transform:uppercase;color:var(--accent);
}
h1{
  margin:0;
  font-stretch:62%;
  font-weight:800;
  font-size:clamp(38px,10vh,112px);
  line-height:.9;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.rule-red{flex:0 0 auto;display:block;width:120px;height:6px;background:var(--accent)}
.copy p{
  margin:0;max-width:34ch;
  font-size:clamp(15px,2.4vh,22px);line-height:1.45;text-wrap:pretty;
}
.link{
  font-size:clamp(11px,1.6vh,14px);
  font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  border-bottom:2px solid var(--accent);padding-bottom:4px;
}
.link:hover{border-bottom-color:var(--accent-dark)}
.rule-diag{
  flex:1 1 40px;min-width:40px;height:8px;
  background:repeating-linear-gradient(135deg,var(--accent) 0 2px,transparent 2px 9px);
}

/* ---- mobile: colonna singola, divisore orizzontale ---- */
@media (max-width:720px){
  .page{padding:2vh 5vw}
  .main{gap:2.5vh 0;padding:2.5vh 0}
  .copy{border-left:0;border-top:2px solid var(--ink);padding-left:0;padding-top:2.5vh;gap:2vh}
  .mark img{max-height:22vh}
  .rule-diag{flex:1 0 100%;order:3}
}

/* ---- schermi bassi (landscape mobile) ---- */
@media (max-height:520px){
  h1{font-size:clamp(30px,9vh,60px)}
  .mark img{max-height:26vh}
}