:root { --locale-ink:#08172f; --locale-blue:#1457d9; --locale-pale:#eef4ff; --locale-line:#d8e0ec; --locale-copy:#3b4a62; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--locale-ink); background:#fff; font-family:Inter,Arial,sans-serif; line-height:1.62; }
.locale-skip { position:fixed; inset-inline-start:1rem; top:0; transform:translateY(-150%); background:#fff; color:var(--locale-ink); padding:.75rem 1rem; z-index:5; }
.locale-skip:focus { top:1rem; transform:translateY(0); }
.locale-header { min-height:82px; display:flex; align-items:center; gap:1.5rem; padding:1rem clamp(1.25rem,4vw,5rem); border-bottom:1px solid var(--locale-line); position:sticky; top:0; z-index:3; background:rgba(255,255,255,.97); }
.locale-brand { flex:0 0 auto; display:flex; align-items:center; }
.locale-brand img { width:170px; max-width:28vw; height:auto; display:block; }
.locale-header nav { display:flex; flex:1; align-items:center; justify-content:center; gap:clamp(.65rem,1.6vw,1.35rem); flex-wrap:wrap; }
.locale-header a,.locale-footer a { color:var(--locale-ink); text-decoration:none; font-weight:650; font-size:.88rem; }
.locale-header a:hover,.locale-footer a:hover { color:var(--locale-blue); }
.locale-language-links { display:flex; gap:.35rem; border:1px solid var(--locale-line); padding:.2rem; }
.locale-language-links a { font-size:.72rem; padding:.22rem .36rem; color:#53627a; }
.locale-language-links a:hover { background:var(--locale-pale); }
.locale-hero { padding:clamp(3.5rem,8vw,7rem) clamp(1.25rem,10vw,11rem) clamp(2.5rem,5vw,4.5rem); background:linear-gradient(125deg,#f9fbff 0%,#eaf2ff 100%); border-bottom:1px solid var(--locale-line); }
.locale-hero > p:first-child { color:var(--locale-blue); font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin:0 0 .75rem; }
.locale-hero h1 { max-width:900px; font-size:clamp(2.15rem,5vw,4.85rem); line-height:1.04; letter-spacing:-.055em; margin:0; }
.locale-lead { max-width:760px; color:var(--locale-copy); font-size:clamp(1.05rem,1.6vw,1.28rem); margin:1.35rem 0 1.7rem; }
.locale-button { display:inline-block; background:var(--locale-blue); color:#fff; text-decoration:none; padding:.8rem 1.15rem; font-weight:750; border-radius:2px; }
.locale-button:hover { background:#0b43b3; }
.locale-card-grid { width:min(1240px,calc(100% - 2.5rem)); margin:clamp(2rem,5vw,5rem) auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.locale-card { border:1px solid var(--locale-line); color:var(--locale-ink); text-decoration:none; padding:1.35rem; min-height:220px; display:flex; flex-direction:column; align-items:flex-start; transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease; background:#fff; }
.locale-card:hover { transform:translateY(-3px); border-color:#8facdf; box-shadow:0 12px 26px rgba(22,69,150,.10); }
.locale-card img { width:100%; aspect-ratio:16/9; object-fit:cover; margin:-1.35rem -1.35rem 1.25rem; width:calc(100% + 2.7rem); border-bottom:1px solid var(--locale-line); }
.locale-card span { color:var(--locale-blue); font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.locale-card h2 { font-size:1.2rem; line-height:1.22; margin:.5rem 0 .7rem; }
.locale-card p { color:var(--locale-copy); font-size:.94rem; margin:0 0 1.1rem; }
.locale-card strong { margin-top:auto; color:var(--locale-blue); font-size:.9rem; }
.locale-card--family { background:linear-gradient(135deg,#fff,#f5f8ff); }
.locale-note,.locale-reading { width:min(1040px,calc(100% - 2.5rem)); margin:clamp(2.5rem,6vw,6rem) auto; }
.locale-note { padding:clamp(1.5rem,4vw,3rem); background:var(--locale-ink); color:#fff; }
.locale-note h2 { margin-top:0; font-size:clamp(1.45rem,3vw,2.5rem); line-height:1.15; }
.locale-note p { color:#dfe9ff; max-width:780px; }
.locale-reading { display:grid; grid-template-columns:minmax(180px,240px) minmax(0,1fr); gap:clamp(2rem,6vw,6rem); align-items:start; }
.locale-reading aside { position:sticky; top:108px; border-top:2px solid var(--locale-blue); padding-top:.7rem; display:flex; flex-direction:column; gap:.55rem; }
.locale-reading aside strong { font-size:.92rem; }
.locale-reading aside a { color:var(--locale-copy); font-size:.88rem; text-decoration:none; }
.locale-reading aside a:hover { color:var(--locale-blue); }
.locale-reading article { min-width:0; }
.locale-reading article section { margin-bottom:3rem; }
.locale-reading h2 { font-size:clamp(1.4rem,2.5vw,2.15rem); line-height:1.18; margin:0 0 .9rem; }
.locale-reading p,.locale-reading li { color:var(--locale-copy); font-size:1.02rem; }
.locale-reading ul { padding-inline-start:1.25rem; }
.locale-reading li { margin:.5rem 0; }
.locale-reading--single { grid-template-columns:minmax(0,760px); justify-content:center; }
.locale-callout { background:var(--locale-pale); border-inline-start:4px solid var(--locale-blue); padding:1.5rem; }
.locale-meta { color:#5c6a80; font-size:.86rem; }
.locale-footer { padding:2.5rem clamp(1.25rem,8vw,8rem); background:#071527; color:#fff; display:grid; gap:.5rem; }
.locale-footer p { color:#bfd0ed; margin:0; }
.locale-footer nav { display:flex; gap:1.2rem; flex-wrap:wrap; margin-top:.7rem; }
.locale-footer a { color:#fff; }
html[dir="rtl"] body { font-family:Tahoma,Arial,sans-serif; }
html[dir="rtl"] .locale-header { flex-direction:row; }
html[dir="rtl"] .locale-hero h1 { letter-spacing:0; }
html[dir="rtl"] .locale-hero > p:first-child,html[dir="rtl"] .locale-card span { letter-spacing:0; }
@media (max-width:1100px) { .locale-header { align-items:flex-start; flex-wrap:wrap; position:static; gap:.8rem; } .locale-header nav { order:3; flex:0 0 100%; width:100%; justify-content:flex-start; } .locale-language-links { margin-inline-start:auto; } .locale-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .locale-reading { grid-template-columns:1fr; gap:1.5rem; } .locale-reading aside { position:static; } }
@media (max-width:580px) { .locale-header { padding:.9rem 1rem; } .locale-brand img { width:150px; max-width:52vw; } .locale-header nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem .35rem; } .locale-header nav a { font-size:.78rem; text-align:center; } .locale-card-grid { grid-template-columns:1fr; width:min(100% - 2rem,1240px); } .locale-hero { padding:3.2rem 1rem 2.4rem; } .locale-reading,.locale-note { width:calc(100% - 2rem); } .locale-reading p,.locale-reading li { font-size:1rem; } }