body{ -moz-osx-font-smoothing:grayscale; }

main{
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px;
    }

    .shell{
      width:min(680px, 100%);
      display:flex;
      flex-direction:column;
      gap: var(--s2);
      transform: translateY(-18px);
    }

    /* Compact language toggle *//* Card with centered inner column */
    .card{
      width:100%;
      background:var(--card);
      border:1px solid var(--border);
      overflow:hidden;
      box-shadow:0 10px 30px rgba(0,0,0,.05);
      display:flex;
      justify-content:center;
    }

    .card-inner{
      width:100%;
      max-width: var(--column);
      display:flex;
      flex-direction:column;
      align-items:center;
    }

    .banner{
      width:100%;
      height:auto;
      display:block;
      margin: 20px auto 0;
    }

    .content{
      width:100%;
      padding: 18px 0 30px;
      text-align:center;
    }

    /* DATE: always one line; scales down instead of abbreviating */
    h1{
      margin: 0 0 var(--s2);
      font-size: clamp(2.00rem, 4.9vw, 3.35rem);
      line-height: 1.06;
      font-weight: 500;
      white-space: nowrap;
    }

    /* Small caps helper (Latin scripts only) */
    .smallcaps{
      font-variant: small-caps;
      letter-spacing: normal;
      text-transform: none;
    }

    /* LOCATION: bigger + small caps for Latin languages */
    .location{
      margin: 0 0 var(--s4);
      color: var(--accent);
      font-weight: 600;
      font-size: 1.65rem;
      line-height: 1.15;
    }

    /* Text blocks */
    .greeting{
      margin: 0 0 var(--s2);
      font-size: 1.15rem;
      line-height: 1.65;
    }

    .message{
      margin: 0 0 var(--s4);
      font-size: 1.15rem;
      line-height: 1.65;
    }

    /* NAMES: bigger + small caps for Latin languages */
    .signature{
      margin: 0 0 var(--s4);
      color: var(--accent);
      font-weight: 600;
      font-size: 1.65rem;
      line-height: 1.15;
    }

    /* Footer: roman (not italic) */
    .footer{
      margin: 0;
      font-size: 1.15rem;
      line-height: 1.65;
      color: var(--text);
      font-style: normal;
    }

    .details-link{
      display:inline-flex;
      align-items:center;
      gap:12px;
      padding: 11px 14px 11px 20px;
      border: 1px solid var(--accent);
      border-radius: 999px;
      color: var(--accent);
      font-family:"EB Garamond", ui-serif, Georgia, serif;
      font-size: 1.05rem;
      font-weight: 500;
      letter-spacing: .04em;
      line-height: 1.1;
      text-decoration:none;
      transition: background .2s ease, color .2s ease, transform .2s ease;
    }

    .details-link::after{
      content:"→";
      display:flex;
      align-items:center;
      justify-content:center;
      width:22px;
      height:22px;
      border:1px solid currentColor;
      border-radius:50%;
      font-family:"EB Garamond", ui-serif, Georgia, serif;
      font-size:1rem;
      line-height:1;
      transform:translateY(-1.25px);
    }

    .details-link:hover{
      background: var(--accent);
      color: var(--card);
      transform:translateY(-1px);
    }

    .details-link:focus-visible{
      outline: 2px solid var(--accent);
      outline-offset: 3px;
    }

    .lang{ display:none; }
    .lang.active{ display:block; }

    /* Serbian Cyrillic: localized forms (harmless, can help shaping) */
    .lang[lang="sr-Cyrl"]{
      font-feature-settings: "locl" 1;
    }

    /* Countdown BELOW card (smaller + no title) */
    .countdown-wrap{
      margin-top: var(--s4);
      display:flex;
      flex-direction:column;
      align-items:center;
      gap: 10px;
    }

    .countdown{
      width: min(420px, 100%);
      text-align:center;
      color: var(--muted);
    }

    .countdown .row{
      display:flex;
      justify-content:center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .countdown .unit{
      min-width: 76px;
      padding: 8px 10px;
      background: rgba(255,255,255,0.50);
      border: 1px solid rgba(0,0,0,0.04);
      border-radius: 12px;
      box-shadow: 0 4px 14px rgba(0,0,0,0.035);
    }

    .countdown .num{
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--text);
      line-height: 1.05;
    }

    .countdown .cap{
      margin-top: 3px;
      font-size: 0.85rem;
      color: var(--muted);
      line-height: 1.2;
    }

    /* ICS link under countdown */
    .ics{
      font-size: 0.98rem;
      color: var(--muted);
      text-align: center;
    }

    .ics a{
      color: var(--accent);
      text-decoration: none;
      border-bottom: 1px solid rgba(138,107,79,0.45);
      padding-bottom: 1px;
      transition: opacity .2s ease, border-color .2s ease;
    }

    .ics a:hover{
      opacity: 0.85;
      border-color: rgba(138,107,79,0.75);
    }

    @media (max-width: 480px){
      .card-inner{ padding: 0 24px; }
      .content{ padding: 16px 0 26px; }
      .toggle button{ font-size: 0.8rem; padding: 4px 7px; }
      h1{ line-height: 1.04; }

      .countdown .unit{ min-width: 70px; padding: 7px 9px; }
      .countdown .num{ font-size: 1.15rem; }
      .countdown .cap{ font-size: 0.8rem; }
      .ics{ font-size: 0.95rem; }
    }

    @media (max-width: 420px){
      h1{ font-size: clamp(1.70rem, 5.6vw, 2.35rem); }
    }