/*
 * The brand sites: Froggo, Beggi, Dinno, Jazzy Roo.
 *
 * Deliberately plain CSS rather than Tailwind. Eleboot's stylesheet is built
 * by Vite and its compiled bundle is committed; adding four more sites to that
 * build would mean rebuilding (and risking) the live shop's CSS every time a
 * brochure page changes. These four are simple enough not to need it.
 *
 * Every colour comes from custom properties the layout sets per brand.
 */

:root {
    --brand: #45552a;
    --paper: #f6efe2;
    --ink: #2e2a22;
    --muted: color-mix(in srgb, var(--ink) 62%, transparent);
    --rule: color-mix(in srgb, var(--ink) 14%, transparent);
    --measure: 64ch;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Noto Sans Georgian', 'Noto Sans', system-ui, -apple-system, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.wrap { width: 100%; max-width: 1060px; margin-inline: auto; padding-inline: 20px; }

a { color: inherit; }

img { max-width: 100%; height: auto; display: block; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- header ---------- */

.site-head {
    background: var(--brand);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 20;
}

.site-head .wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 62px;
    flex-wrap: wrap;
}

.brandmark {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    margin-inline-end: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.brandmark img { width: 34px; height: 34px; border-radius: 8px; }

.site-nav { display: flex; gap: 18px; flex-wrap: wrap; }

.site-nav a {
    text-decoration: none;
    font-size: 15px;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    opacity: .9;
}

.site-nav a:hover { opacity: 1; }
.site-nav a[aria-current="page"] { border-bottom-color: #fff; opacity: 1; }

.langs { display: flex; gap: 10px; font-size: 13px; }
.langs a { text-decoration: none; opacity: .6; text-transform: uppercase; }
.langs a[aria-current="true"] { opacity: 1; font-weight: 600; }

/* ---------- hero ---------- */

.hero {
    background: var(--brand);
    color: #fff;
    padding-block: 8px 48px;
    text-align: center;
}

.hero img { width: min(420px, 78vw); margin-inline: auto; }

/* A wide cover runs the full width of the page instead of the square logo.
   The hero is painted in the cover's own teal and the cover's edges fade into
   it, so the picture reads as the header rather than a box inside it. */
.hero img.cover {
    width: 100%;
    height: auto;
    margin-top: 8px;
    --fade: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent),
            linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: var(--fade);
    -webkit-mask-composite: source-in;
    mask-image: var(--fade);
    mask-composite: intersect;
}

.hero:has(img.cover) { padding-bottom: 20px; }

.hero .tagline {
    margin: 4px auto 0;
    font-size: clamp(19px, 4.4vw, 25px);
    max-width: 24ch;
    line-height: 1.4;
}

/* ---------- sections ---------- */

main { flex: 1; }

section { padding-block: 52px; }

h1, h2 { line-height: 1.25; text-wrap: balance; margin: 0 0 18px; }
h1 { font-size: clamp(27px, 5.4vw, 36px); }
h2 { font-size: clamp(22px, 4.2vw, 28px); }

.lead { font-size: clamp(18px, 3.4vw, 21px); max-width: var(--measure); }

.prose p { max-width: var(--measure); margin: 0 0 20px; }
.prose p:last-child { margin-bottom: 0; }

.story-title { margin-top: 44px; }

/* ---------- picture grid ---------- */

.scenes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin-top: 28px;
}

.scenes img { border-radius: 10px; width: 100%; }

/* A story spread: picture and words side by side, stacking on a phone. */
.spread {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: center;
    margin-bottom: 40px;
}

@media (min-width: 760px) {
    .spread { grid-template-columns: 1fr 1fr; gap: 36px; }
    .spread:nth-child(even) .spread-art { order: 2; }
}

.spread-art img { border-radius: 10px; }
.spread p { margin: 0; max-width: 46ch; }

/* ---------- coming soon ---------- */

.soon {
    text-align: center;
    padding-block: 72px;
}

.soon img { width: min(300px, 70vw); margin: 0 auto 26px; border-radius: 12px; }
.soon p { max-width: 40ch; margin-inline: auto; color: var(--muted); }

.dots::after {
    content: '';
    animation: dots 1.8s steps(4, end) infinite;
}

@keyframes dots {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
}

@media (prefers-reduced-motion: reduce) {
    .dots::after { animation: none; content: '...'; }
    html { scroll-behavior: auto; }
}

/* ---------- contact ---------- */

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 26px;
}

.tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 18px;
    border: 1px solid var(--rule);
    border-radius: 10px;
    text-decoration: none;
    background: color-mix(in srgb, var(--brand) 4%, transparent);
}

.tile:hover { background: color-mix(in srgb, var(--brand) 9%, transparent); }
.tile .k { font-size: 13px; color: var(--muted); }
.tile .v { font-weight: 600; word-break: break-word; }

/* ---------- the family strip ---------- */

.family { border-top: 1px solid var(--rule); }

.family-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.family-list a {
    text-decoration: none;
    text-align: center;
    border-radius: 10px;
    overflow: hidden;
    display: block;
    border: 1px solid var(--rule);
}

.family-list img { width: 100%; }
.family-list span { display: block; padding: 10px 6px; font-size: 15px; }

/* ---------- footer ---------- */

.site-foot {
    background: var(--brand);
    color: #fff;
    padding-block: 26px;
    font-size: 14px;
}

.site-foot .wrap { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.site-foot .spacer { margin-inline-start: auto; }
.site-foot a { opacity: .85; }

/* Georgian has no capitals; forcing them produces broken-looking words. */
:lang(ka) .upper { text-transform: none; }