/* BetRepublic — servizio avvisi, Italia
   Direzione: cremisi-nero, quasi inchiostro, con oro e argento trattati come
   materiali lavorati. La pagina non è una pila di fasce: è a due binari, un
   binario stretto che resta con chi legge (marchio, campo email, postilla) e
   una sola colonna di testo che gli scorre accanto.
   Firma: IL PILASTRO — una colonna d'ottone tornita, modellata con ombra,
   rimbalzo, mezzatinta e colmo di luce, che divide i due binari per tutta
   l'altezza del documento, dentro una griglia di colonne volutamente
   disuguale: fili d'argento di peso diverso, uno solo d'oro.
   Titoli in monospazio, testo in grazie. */

:root{
  /* Oro — #E5C945 e #CCAF1F campionati da assets/betrepublic-logo.svg */
  --oro-luce:#fff7d2;
  --oro-chiaro:#f3e29a;
  --oro:#E5C945;
  --oro-fondo:#CCAF1F;
  --oro-ombra:#a8871a;
  --oro-riflesso:#d8bc55;
  --oro-inchiostro:#241d03;

  /* Argento — #ffffff e #BFBFBF campionati dal logotipo */
  --argento-luce:#ffffff;
  --argento-chiaro:#eef0f2;
  --argento:#BFBFBF;
  --argento-ombra:#7d8288;
  --argento-riflesso:#cdd1d6;

  /* Terreno: cremisi-nero saturo */
  --fondo:#0a0305;
  --fondo-cupo:#040102;
  --fondo-piano:#140409;
  --fondo-erto:#26060f;
  --cremisi:#59091b;
  --brace:#9c0f2b;

  --avorio:#f6ecec;
  --avorio-tenue:#d6c6c6;
  --avorio-fioco:#b3a1a4;
  --allarme:#ffb4b9;

  --incisa:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --lettura:Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,"Times New Roman",serif;

  --spigolo:6px;
  --misura:660px;

  --tessitura:repeating-linear-gradient(90deg,rgba(246,236,236,0) 0 3px,rgba(246,236,236,.014) 3px 4px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--lettura);
  font-size:17px;
  line-height:1.68;
  color:var(--avorio-tenue);
  background-color:var(--fondo);
  background-image:
    radial-gradient(64% 30% at 12% 0%,rgba(156,15,43,.30),rgba(156,15,43,0) 62%),
    radial-gradient(52% 22% at 92% 24%,rgba(89,9,27,.26),rgba(89,9,27,0) 66%),
    radial-gradient(46% 16% at 6% 58%,rgba(89,9,27,.24),rgba(89,9,27,0) 68%),
    radial-gradient(46% 14% at 96% 84%,rgba(156,15,43,.16),rgba(156,15,43,0) 70%),
    var(--tessitura),
    linear-gradient(180deg,#160509 0%,#0b0306 34%,#0a0305 100%);
  background-repeat:no-repeat;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
picture{display:contents}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
dl,dd{margin:0}
figure{margin:0}
h1,h2,h3{margin:0;font-family:var(--incisa);font-weight:700;line-height:1.08;letter-spacing:-.03em;color:var(--avorio)}
strong{color:var(--avorio);font-weight:700}
a{color:var(--oro-chiaro)}
[hidden]{display:none!important}

:is(a,button,input,summary,[tabindex]):focus-visible{
  outline:3px solid var(--oro-chiaro);
  outline-offset:3px;
  border-radius:var(--spigolo);
}

.scavalca{
  position:absolute;left:-9999px;top:8px;z-index:40;
  font-family:var(--incisa);font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:var(--oro-inchiostro);
  padding:.85em 1.3em;border-radius:var(--spigolo);
  background-image:linear-gradient(180deg,var(--oro-chiaro),var(--oro-fondo));
}
.scavalca:focus{left:14px}

/* ---------- materiali ---------- */

.brunito{
  background-image:linear-gradient(174deg,#ffffff 0%,#f2f3f5 15%,#BFBFBF 45%,#7d8288 67%,#cdd1d6 87%,#eef0f2 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 7px 16px rgba(0,0,0,.42));
}
.dorato{
  background-image:linear-gradient(174deg,#fff7d2 0%,#f3e29a 17%,#E5C945 43%,#CCAF1F 60%,#a8871a 80%,#d8bc55 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.55));
}

/* ---------- i due binari ---------- */

.impianto{
  display:grid;
  align-items:start;
  max-width:1340px;
  margin-inline:auto;
  padding-inline:clamp(18px,3.4vw,40px);
  grid-template-columns:
    minmax(0,3fr) minmax(0,1.7fr) minmax(0,6.3fr) minmax(0,.8fr);
}

/* IL PILASTRO — colonna d'ottone tornita, per tutta l'altezza del documento */
.pilastro{
  grid-row:1;grid-column:2;
  align-self:stretch;justify-self:center;
  width:16px;border-radius:2px;
  background-image:
    linear-gradient(180deg,var(--fondo) 0,rgba(10,3,5,.6) 3%,rgba(10,3,5,0) 12%,rgba(10,3,5,0) 88%,rgba(10,3,5,.6) 97%,var(--fondo) 100%),
    repeating-linear-gradient(180deg,rgba(0,0,0,.085) 0 1px,rgba(255,255,255,.035) 1px 2px,rgba(0,0,0,0) 2px 14px),
    linear-gradient(90deg,#0f0a01 0%,#2b2204 8%,#5d4c0d 15%,#9b8316 25%,#d4b92c 36%,#E5C945 43%,#fff7d2 50%,#E5C945 57%,#CCAF1F 66%,#8a7211 77%,#4a3c08 88%,#100b02 100%);
  box-shadow:
    16px 0 40px -16px rgba(0,0,0,.95),
    0 0 26px rgba(229,201,69,.12),
    0 0 90px rgba(156,15,43,.2);
}

/* fili della griglia: argento di peso disuguale, uno d'oro */
.filo{grid-row:1;align-self:stretch;width:1px}
.filo-a{grid-column:1;justify-self:end;width:2px;background-image:linear-gradient(180deg,rgba(191,191,191,0),rgba(191,191,191,.5) 4%,rgba(191,191,191,.12) 62%,rgba(191,191,191,0) 97%)}
.filo-c{grid-column:3;justify-self:start;background-image:linear-gradient(180deg,rgba(229,201,69,0),rgba(229,201,69,.7) 5%,rgba(229,201,69,.14) 60%,rgba(229,201,69,0) 97%)}
.filo-b{grid-column:3;justify-self:end;background-image:linear-gradient(180deg,rgba(191,191,191,0),rgba(191,191,191,.26) 6%,rgba(191,191,191,.06) 58%,rgba(191,191,191,0) 97%)}
.filo-d{grid-column:4;justify-self:end;background-image:linear-gradient(180deg,rgba(191,191,191,0),rgba(191,191,191,.4) 4%,rgba(191,191,191,.09) 56%,rgba(191,191,191,0) 97%)}

/* ---------- il binario che resta ---------- */

.binario{
  grid-row:1;grid-column:1;
  position:sticky;top:0;
  align-self:start;
  z-index:3;
  padding-block:clamp(22px,3vw,34px);
  max-height:100vh;
  overflow-y:auto;
}
.binario-guscio{
  border-radius:var(--spigolo);
  padding:clamp(18px,1.9vw,24px);
  background-image:var(--tessitura),linear-gradient(180deg,#2c0812 0%,#1a0509 26%,#0d0306 100%);
  box-shadow:
    inset 0 1px 0 rgba(246,236,236,.13),
    0 0 0 1px rgba(191,191,191,.11),
    0 30px 60px -32px rgba(0,0,0,.95);
}
.binario-testa{display:flex;align-items:center;gap:12px}
.binario-stemma{height:23px;width:auto;flex:none}
.binario-maggiore{
  flex:none;margin-left:auto;
  font-family:var(--incisa);font-size:.7rem;font-weight:700;letter-spacing:.05em;
  color:var(--oro-chiaro);
  padding:.28em .55em;border-radius:4px;
  border:1px solid rgba(229,201,69,.42);
  background-image:linear-gradient(180deg,rgba(229,201,69,.17),rgba(229,201,69,.03));
}
.binario-firma{
  margin-top:14px;padding-top:14px;
  font-size:.86rem;line-height:1.56;color:var(--avorio-fioco);
  border-top:1px solid rgba(191,191,191,.13);
}
.binario-appello{
  font-size:1.12rem;letter-spacing:-.02em;
  margin-bottom:14px;padding-left:12px;position:relative;
}
.binario-appello::before{
  content:"";position:absolute;left:0;top:.14em;bottom:.14em;width:3px;border-radius:2px;
  background-image:linear-gradient(180deg,var(--oro-luce),var(--oro) 45%,var(--oro-fondo) 70%,var(--oro-ombra));
}
.binario-ritratto{
  position:relative;margin-top:clamp(18px,2vw,24px);
  border-radius:var(--spigolo);padding:5px;
  background-image:linear-gradient(180deg,#310913,#0d0305);
  box-shadow:
    0 0 0 1px rgba(191,191,191,.13),
    inset 0 1px 0 rgba(246,236,236,.12),
    0 24px 46px -28px rgba(0,0,0,.95);
}
.binario-ritratto img{border-radius:4px;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 26%}
.binario-ritratto::after{
  content:"";position:absolute;left:5px;right:5px;bottom:5px;height:2px;
  background-image:linear-gradient(90deg,rgba(229,201,69,0),var(--oro-fondo) 26%,var(--oro-luce) 50%,var(--oro) 70%,rgba(229,201,69,0));
}

/* ---------- iscrizione ---------- */

.iscrizione-sede{margin-top:clamp(18px,2vw,24px)}
.iscrizione-dicitura{display:block}
.iscrizione-parola{
  display:block;margin-bottom:8px;
  font-family:var(--incisa);font-size:.67rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--avorio-fioco);
}
.iscrizione-casella{
  width:100%;display:block;
  font-family:var(--lettura);font-size:1rem;line-height:1.4;
  color:var(--avorio);
  background-color:#100307;
  background-image:linear-gradient(180deg,rgba(246,236,236,.05),rgba(246,236,236,0) 46%);
  border:1px solid rgba(191,191,191,.3);
  border-radius:var(--spigolo);
  padding:.8em .9em;
  box-shadow:inset 0 1px 0 rgba(246,236,236,.11),0 8px 20px -14px rgba(0,0,0,.95);
}
.iscrizione-casella::placeholder{color:#8e7d80;opacity:1}
.iscrizione-casella[aria-invalid="true"]{
  border-color:#dd6f7a;
  box-shadow:inset 0 0 0 1px rgba(221,111,122,.5),0 8px 20px -14px rgba(0,0,0,.95);
}

.bottone{
  width:100%;margin-top:12px;
  font-family:var(--incisa);font-size:.78rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--oro-inchiostro);
  border:0;border-radius:var(--spigolo);
  padding:1.08em 1.4em;cursor:pointer;
  background-image:linear-gradient(180deg,#fff7d2 0%,#f0dd93 13%,#E5C945 40%,#CCAF1F 66%,#a58a14 91%,#cfb229 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -1px 0 rgba(70,56,4,.7),
    0 0 0 1px rgba(125,103,16,.62),
    0 12px 26px -12px rgba(0,0,0,.95);
  transition:filter .18s ease;
}
.bottone:hover{filter:brightness(1.07)}
.iscrizione-allarme{
  margin-top:12px;font-size:.9rem;line-height:1.5;color:var(--allarme);
  padding-left:11px;border-left:3px solid rgba(221,111,122,.7);
}
.iscrizione-postilla{margin-top:13px;font-size:.82rem;line-height:1.54;color:var(--avorio-fioco)}

.iscrizione-conferma{
  border-radius:var(--spigolo);
  padding:clamp(18px,2vw,24px);
  background-image:linear-gradient(180deg,#2f0913,#0f0307);
  box-shadow:
    0 0 0 1px rgba(229,201,69,.32),
    inset 0 1px 0 rgba(246,236,236,.12),
    0 22px 48px -26px rgba(0,0,0,.95);
}
.iscrizione-conferma:focus{outline:none}
.iscrizione-conferma:focus-visible{outline:3px solid var(--oro-chiaro);outline-offset:3px}
.iscrizione-spunta{color:var(--oro);display:block;filter:drop-shadow(0 2px 5px rgba(229,201,69,.4))}
.iscrizione-conferma-grido{
  margin-top:11px;font-family:var(--incisa);font-size:1.1rem;font-weight:700;letter-spacing:-.02em;color:var(--avorio);
}
.iscrizione-conferma-frase{margin-top:8px;font-size:.92rem;line-height:1.56;color:var(--avorio-tenue)}

/* ---------- la colonna che scorre ---------- */

.colonna{
  grid-row:1;grid-column:3;
  max-width:var(--misura);
  padding-block:clamp(44px,6vw,96px) clamp(56px,7vw,110px);
  padding-left:clamp(18px,2.2vw,30px);
}

.esordio{margin-bottom:clamp(38px,4.4vw,62px)}
.esordio-insegna{
  font-family:var(--incisa);font-size:.69rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--oro-chiaro);
  margin-bottom:clamp(16px,2vw,24px);
}
.esordio-grido{font-size:clamp(2.05rem,4.8vw,3.5rem);letter-spacing:-.045em;text-wrap:balance}
.esordio-incisa{
  display:block;font-size:.72em;letter-spacing:-.035em;
  background-image:linear-gradient(174deg,#8b7679 0%,#b9a7a9 30%,#e4d7d8 68%,#f6ecec 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 -1px 0 rgba(0,0,0,.85)) drop-shadow(0 1px 0 rgba(246,236,236,.12));
}
.esordio-rilievo{display:block;margin-top:.1em}

/* il claim del marchio, citato e attribuito: non è la voce di questa pagina */
.esordio-motto{
  position:relative;
  margin-top:clamp(20px,2.4vw,28px);
  padding-left:15px;
  font-style:italic;font-size:1.02rem;line-height:1.5;
  color:var(--avorio-tenue);
}
.esordio-motto::before{
  content:"";position:absolute;left:0;top:.16em;bottom:.16em;width:2px;border-radius:2px;
  background-image:linear-gradient(180deg,var(--oro-luce),var(--oro) 42%,var(--oro-fondo) 72%,rgba(168,135,26,.28));
}
.esordio-fonte{
  display:block;margin-top:7px;
  font-family:var(--incisa);font-style:normal;font-size:.66rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--avorio-fioco);
}
.esordio-preludio{
  margin-top:clamp(20px,2.4vw,28px);
  font-size:clamp(1.1rem,1.9vw,1.42rem);line-height:1.5;color:var(--avorio-tenue);
}

.titoletto{
  margin-top:clamp(46px,5.4vw,74px);margin-bottom:clamp(16px,1.9vw,22px);
  font-size:1.02rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--oro-chiaro);font-weight:700;
  padding-bottom:12px;position:relative;
}
.titoletto::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background-image:linear-gradient(90deg,rgba(229,201,69,.6),rgba(229,201,69,.16) 34%,rgba(191,191,191,.05) 74%,rgba(191,191,191,0));
}
.esordio+.titoletto{margin-top:0}

.discorso-frase{font-size:1.04rem}
.discorso-frase+.discorso-frase{margin-top:1.1em}

.copertura-brano{font-size:1.02rem}
.copertura-brano+.copertura-brano{margin-top:1.2em}
.copertura-avvio{
  font-family:var(--incisa);font-weight:700;font-size:.88em;letter-spacing:-.01em;
  color:var(--oro-chiaro);margin-right:.42em;
}

.figura{margin-top:clamp(34px,4vw,52px)}
.figura-vetro{
  position:relative;border-radius:var(--spigolo);padding:5px;
  background-image:linear-gradient(180deg,#310913,#0d0305);
  box-shadow:
    0 0 0 1px rgba(191,191,191,.12),
    inset 0 1px 0 rgba(246,236,236,.12),
    0 30px 58px -32px rgba(0,0,0,.95);
}
.figura-vetro img{border-radius:4px;width:100%}
.figura-vetro::after{
  content:"";position:absolute;left:5px;right:5px;bottom:5px;height:2px;
  background-image:linear-gradient(90deg,rgba(229,201,69,0),var(--oro-fondo) 26%,var(--oro-luce) 50%,var(--oro) 70%,rgba(229,201,69,0));
}
.figura-didascalia{margin-top:15px;font-size:.93rem;line-height:1.6;color:var(--avorio-fioco)}
.figura-nome{
  display:block;margin-bottom:4px;
  font-family:var(--incisa);font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--oro-chiaro);
}

.interpello-richiesta{
  font-family:var(--incisa);font-size:1rem;font-weight:700;letter-spacing:-.02em;line-height:1.34;
  color:var(--avorio);
  padding-top:clamp(18px,2.1vw,24px);
  border-top:1px solid rgba(191,191,191,.13);
}
.interpello-richiesta:first-of-type{padding-top:0;border-top:0}
.interpello-replica{margin-top:10px;padding-bottom:clamp(18px,2.1vw,24px);font-size:.99rem}
.interpello-replica:last-of-type{padding-bottom:0}

/* ---------- basamento ---------- */

.basamento{
  padding-block:clamp(40px,5vw,64px) 28px;
  background-image:linear-gradient(180deg,#120409,#040102);
  border-top:1px solid rgba(191,191,191,.11);
  position:relative;
}
.basamento::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background-image:linear-gradient(90deg,rgba(229,201,69,0),rgba(229,201,69,.4) 26%,rgba(255,247,210,.62) 44%,rgba(204,175,31,.28) 68%,rgba(229,201,69,0));
}
.telaio{width:100%;max-width:1340px;margin-inline:auto;padding-inline:clamp(18px,3.4vw,40px)}
.basamento-colonne{display:grid;gap:clamp(24px,3.4vw,52px);grid-template-columns:minmax(0,1.7fr) minmax(0,.9fr) minmax(0,1.5fr)}
.basamento-stemma{height:21px;width:auto}
.basamento-frase{margin-top:15px;font-size:.9rem;color:var(--avorio-fioco);max-width:38ch}
.basamento-titolo{
  font-family:var(--incisa);font-size:.66rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--avorio);margin-bottom:13px;
}
.basamento-sentieri li+li{margin-top:9px}
.basamento-sentieri a{font-size:.92rem;color:var(--avorio-tenue);text-decoration:none;border-bottom:1px solid rgba(229,201,69,.42);padding-bottom:1px}
.basamento-sentieri a:hover{color:var(--oro-chiaro)}
.basamento-cautela{font-size:.89rem;color:var(--avorio-fioco)}
.basamento-maggiore{
  display:inline-block;margin-right:7px;
  font-family:var(--incisa);font-size:.71rem;font-weight:700;letter-spacing:.05em;
  color:var(--oro-chiaro);
  padding:.2em .5em;border-radius:4px;
  border:1px solid rgba(229,201,69,.42);
  background-image:linear-gradient(180deg,rgba(229,201,69,.17),rgba(229,201,69,.03));
}
.basamento-chiusa{margin-top:clamp(28px,3.6vw,44px);padding-top:21px;border-top:1px solid rgba(191,191,191,.11)}
.basamento-postilla{font-size:.81rem;line-height:1.6;color:var(--avorio-fioco);max-width:92ch}
.basamento-postilla+.basamento-postilla{margin-top:8px}

/* ---------- adattamenti ---------- */

@media (max-width:1120px){
  .impianto{grid-template-columns:minmax(0,3.4fr) minmax(0,1.35fr) minmax(0,7fr) minmax(0,.4fr)}
}

@media (max-width:980px){
  .impianto{
    grid-template-columns:34px minmax(0,1fr);
    padding-inline:clamp(14px,3vw,26px);
  }
  .pilastro{grid-row:1/span 2;grid-column:1;width:11px}
  .filo-a,.filo-b,.filo-c,.filo-d{display:none}
  .binario{
    grid-row:1;grid-column:2;
    position:static;max-height:none;overflow:visible;
    padding-block:clamp(18px,3vw,26px) 0;
  }
  .binario-guscio{max-width:560px}
  .colonna{
    grid-row:2;grid-column:2;
    max-width:var(--misura);
    padding-block:clamp(34px,5vw,48px) clamp(44px,6vw,72px);
    padding-left:0;
  }
  .binario-ritratto{max-width:400px}
}

@media (max-width:620px){
  body{font-size:16px}
  .impianto{grid-template-columns:22px minmax(0,1fr)}
  .pilastro{width:8px}
  .esordio-grido{font-size:clamp(1.85rem,8.4vw,2.4rem)}
  .basamento-colonne{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:400px){
  .impianto{grid-template-columns:16px minmax(0,1fr);padding-inline:12px}
  .telaio{padding-inline:14px}
}

/* ---------- movimento ---------- */

@keyframes sali{from{opacity:.001;transform:translateY(18px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:no-preference){
  .esordio-insegna,.esordio-grido,.esordio-motto,.esordio-preludio,.binario-guscio{
    animation:sali .74s cubic-bezier(.2,.72,.24,1) both;
  }
  .esordio-grido{animation-delay:.07s}
  .esordio-motto{animation-delay:.13s}
  .esordio-preludio{animation-delay:.19s}
  .binario-guscio{animation-delay:.04s}

  @supports (animation-timeline:view()){
    .figura,.copertura-brano,.discorso-frase{
      animation:sali linear both;
      animation-timeline:view();
      animation-range:entry 4% entry 44%;
    }
  }
}

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