/* Mobile reading layout; original desktop composition remains in style.css. */
:root { --header-height: 108px; }
html { scroll-padding-top: calc(var(--header-height) + 18px); }
#history, #album, #participate, #giveaway { scroll-margin-top: 0; }
.hero-copy, .hero-photo, .participate-copy, .entry-card, .summary-panel,
.details > *, .steps li > div, .summary-rules p { min-width: 0; }
.button > span { flex: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { flex: none; }
.menu-toggle .menu-label { margin: 0; }
.menu-toggle .menu-icon { margin: 0; line-height: 1; }

/* Keep the whole print and its controls inside the available screen height. */
.cut-1782 { --photo-ratio: .844765343; }
.cut-1783 { --photo-ratio: .828087167; }
.cut-1784 { --photo-ratio: .706122449; }
.cut-1785 { --photo-ratio: .82166302; }
#photo-dialog {
  width: min(94vw, 620px);
  max-width: 620px;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  padding: 58px 18px 18px;
  overscroll-behavior: contain;
}
.dialog-cutout {
  --photo-height: calc(100vh - 225px);
  --photo-height: calc(100dvh - 225px);
  width: min(100%, calc(var(--photo-height) * var(--photo-ratio)));
  max-width: 440px;
  touch-action: pan-y pinch-zoom;
}
#close-dialog { position: absolute; top: 8px; right: 10px; width: 44px; height: 44px; }
#dialog-caption { font-size: 23px; line-height: 1.3; margin: 14px 0 10px; }
.dialog-nav { gap: 24px; font-size: 14px; }
.dialog-nav button { width: 52px; height: 46px; font-size: 22px; border-radius: 4px; }
body.photo-opened { overflow: hidden; }

@media (max-width: 900px) {
  :root { --header-height: 94px; }
  .wrap { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
  .header {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) auto;
    gap: 16px;
    padding: 14px max(24px, env(safe-area-inset-right)) 14px max(24px, env(safe-area-inset-left));
    padding-top: max(14px, env(safe-area-inset-top));
  }
  .header .brand img { width: 86px; height: auto; }
  .brand-years { min-width: 0; max-width: none; margin: 0; padding-left: 16px; }
  .brand-years strong { font-size: 22px; line-height: 1.25; white-space: normal; }
  .brand-years span { font-size: 12px; line-height: 1.45; margin-top: 4px; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 48px; min-height: 48px; padding: 10px 12px; margin: 0; border-radius: 5px; }
  .menu-icon { font-size: 24px; }
  .menu-toggle[aria-expanded="true"] { color: var(--blue); background: #e8edf7; border-color: #bbc6dc; }
  .header nav { display: none; }
  .header nav.is-open {
    position: absolute;
    inset: 100% 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    margin: 0;
    padding: 10px 24px 16px;
    gap: 3px;
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 18px #26292312;
    max-height: calc(100vh - var(--header-height) - 16px);
    max-height: calc(100dvh - var(--header-height) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .header nav a { display: flex; align-items: center; font-size: 16px; padding: 12px 14px; min-height: 48px; white-space: normal; }
  .hero { max-width: 720px; grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 36px; padding-bottom: 48px; }
  .hero-copy { display: contents; }
  .hero .eyebrow { grid-row: 1; margin: 0 0 20px; font-size: 11px; letter-spacing: 1.4px; }
  .hero h1 { grid-row: 2; font-size: clamp(30px, 8.9vw, 46px); line-height: 1.25; letter-spacing: -.7px; }
  .hero .intro { grid-row: 3; max-width: 580px; font-size: 17px; line-height: 1.75; margin: 22px 0 28px; }
  .approved-hero { grid-row: 4; width: 100%; max-width: 460px; justify-self: center; padding: 0; margin: 0 0 30px; }
  .olga-above-photo { margin: 0; gap: 6px; padding-top: 15px; }
  .olga-name-line { font-size: 17px; line-height: 1.6; }
  .olga-name-line br { display: none; }
  .olga-name-line span { display: block; white-space: normal; font-size: 27px; }
  .olga-route { font-size: 14px; line-height: 1.65; }
  .kept-memory { font-size: 29px; line-height: 1.15; margin: 16px 0 0; }
  .hero-note { grid-row: 5; font-size: 15px; line-height: 1.75; margin: 0 0 24px; padding-left: 16px; }
  .hero-note br { display: none; }
  .hero .button { grid-row: 6; }
  .campaign-date { grid-row: 7; margin-top: 18px; font-size: 14px; line-height: 1.65; }
  .campaign-date small { font-size: 14px; }
  .button, .hero .button, .wide { width: 100%; min-height: 54px; padding: 15px 18px; gap: 12px; font-size: 15px; line-height: 1.5; text-align: left; }
  h2, .memory h2, .participate h2 { font-size: clamp(29px, 5.5vw, 38px); line-height: 1.3; letter-spacing: -.7px; }
  .memory { padding-top: 44px; padding-bottom: 48px; }
  .memory-text { grid-template-columns: 1fr; max-width: 630px; margin: 24px auto 0; gap: 0; font-size: 16px; line-height: 1.8; }
  .memory-text p { margin: 0 0 18px; padding: 0; }
  .memory-text p:last-child { margin-bottom: 0; }
  .memory-end { max-width: 570px; margin: 28px auto 0; font-size: 27px; }
  .album { padding: 48px 0; border-top: 1px solid var(--line); }
  .section-top { display: block; }
  .section-top > p { font-size: 15px; margin-top: 18px; }
  .section-top > p br { display: none; }
  .olga-intro { margin-top: 30px; gap: 16px; }
  .album-number { font-size: 36px; }
  .olga-intro blockquote { font-size: 21px; line-height: 1.6; }
  .olga-intro p, .reaction-note { font-size: 15px; line-height: 1.75; }
  .olga-intro a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; margin: 30px 0; }
  .gallery figure:nth-child(even) { padding-top: 0; }
  .gallery figcaption .handwritten { font-size: 27px; }
  .gallery figcaption small { font-size: 14px; }
  .photo-reaction { min-height: 48px; padding: 11px 12px; font-size: 15px; gap: 9px; }
  .heart-icon { font-size: 25px; }
  .reaction-status:empty { display: none; }
  .album-invite { display: block; padding-top: 25px; }
  .album-invite .handwritten { display: block; margin: 0 0 12px; font-size: 28px; }
  .album-invite a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
  .participate { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-top: 48px; padding-bottom: 40px; }
  .participate-copy > p:not(.eyebrow):not(.handwritten) { max-width: 630px; font-size: 16px; line-height: 1.8; margin: 22px 0; }
  .participate-copy .handwritten { font-size: 28px; margin: 25px 0 0; }
  .entry-card { padding: 28px 24px; }
  .card-label { font-size: 11px; letter-spacing: 1.2px; }
  .steps li { gap: 12px; margin-bottom: 26px; }
  .steps li > span { font-size: 13px; }
  .steps h3 { font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
  .steps p, .direct-note, .copy-status { font-size: 15px; line-height: 1.75; }
  .giveaway-summary { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 8px; padding-bottom: 30px; }
  .summary-panel { padding: 26px 24px; }
  .summary-panel h2 { font-size: 19px; line-height: 1.5; letter-spacing: 0; }
  .summary-rules { gap: 18px; }
  .summary-rules li { gap: 12px; }
  .summary-rules p, .summary-prize p { font-size: 16px; line-height: 1.75; }
  .summary-prize { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
  .summary-prize > span { font-size: 14px; }
  .summary-prize strong { font-size: 26px; }
  .summary-footnote { font-size: 27px; }
  .details { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 25px; padding-bottom: 48px; }
  .details h2 br { display: none; }
  .details h2 em { margin-left: 5px; }
  .faq summary { min-height: 44px; align-items: center; font-size: 16px; gap: 16px; }
  .faq p { font-size: 16px; line-height: 1.8; margin: 12px 0 4px; }
  .closing { padding: 48px 0; }
  .closing p:not(.eyebrow):not(.handwritten) { font-size: 16px; }
  .closing p br { display: none; }
  .closing .button { max-width: 480px; }
  footer { display: grid; gap: 8px; font-size: 14px; padding-top: 24px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  footer a { display: inline-flex; align-items: center; min-height: 44px; width: fit-content; }
}

@media (max-width: 520px) {
  .wrap { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
  .header { grid-template-columns: 72px minmax(0, 1fr) 44px; gap: 10px; padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); padding-top: max(12px, env(safe-area-inset-top)); }
  .header .brand img { width: 72px; }
  .brand-years { padding-left: 10px; }
  .brand-years strong { font-size: 18px; letter-spacing: -.3px; }
  .brand-years span { font-size: 11px; }
  .menu-toggle { padding: 0; min-width: 44px; min-height: 46px; }
  .menu-toggle .menu-label { display: none; }
  .hero { padding-top: 28px; }
  .hero .eyebrow { font-size: 10px; letter-spacing: 1px; }
  .hero .intro { font-size: 16px; margin-top: 18px; }
  .gallery { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .gallery figure { width: 100%; max-width: 410px; justify-self: center; }
  .gallery figcaption { padding: 16px 0 14px; text-align: center; }
  .gallery figcaption .handwritten { font-size: 30px; }
  .olga-intro { display: block; }
  .album-number { display: none; }
  .trust-count strong { font-size: 36px; }
  .trust-count span { font-size: 16px; }
  .trust-description { font-size: 16px; }
  .entry-card, .summary-panel { padding: 24px 18px; }
  .steps li { gap: 10px; }
  .summary-prize { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .summary-prize strong { font-size: 28px; }
}

@media (max-width: 360px) {
  .wrap { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
  .header { grid-template-columns: 62px minmax(0, 1fr) 44px; gap: 8px; padding-left: 12px; padding-right: 12px; }
  .header .brand img { width: 62px; }
  .brand-years strong { font-size: 16px; }
  .brand-years span { font-size: 10px; }
  .button, .hero .button, .wide { font-size: 14px; padding-left: 14px; padding-right: 14px; gap: 8px; }
  .trust-count strong { font-size: 32px; }
  .trust-count span { margin-left: 4px; font-size: 15px; }
}

@media (hover: none) {
  .button:hover, .gallery .photo-open:hover { transform: none; }
}

/* Language links remain ordinary links, including when JavaScript is unavailable. */
.language-switch{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}
.header .language-switch a{min-width:44px;justify-content:center;text-align:center;padding:12px 8px;font-size:13px}
.header .language-switch a[aria-current="page"]{color:var(--blue);background:#e8edf7;font-weight:700}
html:lang(de) h1,html:lang(en) h1{overflow-wrap:break-word}
html:lang(de) .steps h3,html:lang(de) .faq summary{hyphens:auto}
@media(min-width:901px){.header{flex-wrap:wrap}.header nav{flex-wrap:wrap;justify-content:center;gap:4px}.brand-years{min-width:0;flex-shrink:1}}
@media(min-width:901px) and (max-width:1240px){.header nav{width:100%;order:4;margin:0}.brand-years{margin-right:auto}}
@media(max-width:900px){.header .language-switch{justify-content:flex-start;gap:8px;padding:8px 6px 0}.header .language-switch a{min-width:48px}.hero-note br,.section-top>p br,.closing p br,.olga-name-line br{display:initial}}

/* Фото из админки в увеличенном виде. */
.dialog-plain img { max-height: calc(100vh - 225px); max-height: calc(100dvh - 225px); }

/* Карусель на планшете — по 2 фото, на телефоне — по одному с краем следующего. */
@media (max-width: 900px) {
  .gallery.is-carousel { grid-auto-columns: calc((100% - 24px) / 2); }
}
@media (max-width: 520px) {
  .gallery.is-carousel { grid-auto-columns: 84%; gap: 18px; }
  .gallery.is-carousel figure { max-width: none; }
}