/* FiraGO: Fira Sans extended to Georgian by bBox Type, a Georgian foundry. One family for
   both scripts, so EN and KA share proportions instead of being two unrelated typefaces
   swapped by unicode-range. Subset to Latin + Georgian + the punctuation these pages use:
   788KB -> 25KB a weight. Licence in ../fonts/FiraGO-OFL.txt. */
@font-face{font-family:"FiraGO";src:url("../fonts/firago-regular.e632984e5f7c.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"FiraGO";src:url("../fonts/firago-medium.ab3f4fd761b7.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"FiraGO";src:url("../fonts/firago-semibold.eed52f439ab4.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"FiraGO";src:url("../fonts/firago-bold.043ed6678f42.woff2") format("woff2");font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono.47eb1d2226ef.woff2") format("woff2");font-weight:300 800;font-display:swap}
:root{--bg:#f6f6f7;--card:#fff;--ink:#101010;--dim:#6b6b70;--line:#e6e6ea;--accent:#2563eb;--radius:14px}
*{box-sizing:border-box}html{color-scheme:light}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"FiraGO",system-ui,-apple-system,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:lang(ka) body,body:lang(ka){line-height:1.65}
.mono,code{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.85em;letter-spacing:.02em}
a{color:inherit}
.top{display:flex;align-items:center;gap:1.5rem;padding:1.25rem 2rem;flex-wrap:wrap}
.brand{display:flex;gap:.75rem;align-items:center;text-decoration:none}.brand .mark{height:52px;width:auto;display:block}
.brand small{display:block;color:var(--dim);font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.15em}
.actions{margin-left:auto;display:flex;gap:.75rem}
.top .lang{display:flex;gap:.25rem;margin-left:.5rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.1rem;border-radius:10px;border:1px solid var(--line);background:var(--card);text-decoration:none;font:inherit;cursor:pointer;color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.ghost{background:var(--card)}.btn.small{padding:.45rem .8rem;font-size:.9rem}
.btn:disabled{opacity:.5;cursor:wait}
.kit-actions{display:flex;gap:.75rem;min-width:0;max-width:100%}
/* One line, whatever the header's button offers. Inside an album it carries the album's name, which on a phone wrapped to four lines and pushed the page down each time a card was opened; the name is cut short with an ellipsis instead (the link's title holds all of it), and the size beside it never breaks into "9" over "MB". Every flex box between the header and the label has to be allowed to shrink for the cut to happen. */
.actions{min-width:0}
.kit-actions a{min-width:0;max-width:100%}
.kit-actions .kit-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kit-actions code{white-space:nowrap;flex-shrink:0}
/* inside an album with nothing to offer the button keeps its place, unseen, unfocusable and with no url, so the header keeps its height */
.kit-actions a.held{visibility:hidden}
/* On a phone the library header gives this button a line of its own, under the logo with the language switch and upload beside it. Left to wrap, the button sat beside the logo or dropped below it depending on how long its label was, so opening an album with a long name added a line and pushed the page down -- and the Georgian "full kit" label, longer than the English, already took a line of its own on the overview. Squeezing it beside the logo instead cut that label short. On its own line it is the same height whatever it offers, in both languages. Library pages only, which is what :has picks out; a browser without it keeps the wrapping it had. */
@media (max-width:600px){.top:has(.kit-actions) .lang{order:1;margin-left:auto}.top:has(.kit-actions) .actions{order:2;flex-basis:100%;margin-left:0}}
.page{max-width:1240px;margin:0 auto;padding:0 2rem 6rem}
.hero{text-align:center;padding:2rem 0 1rem}.hero h1{font-size:clamp(2rem,5vw,3.4rem);margin:.2em 0;font-weight:700;letter-spacing:-.015em}.hero p{max-width:60ch;margin:0 auto;color:#333;font-size:1.1rem}
.view-toggle{display:flex;justify-content:center;gap:.25rem;margin:1.5rem 0}.view-toggle button{font:inherit;padding:.5rem 1rem;border:0;background:transparent;border-bottom:2px solid transparent;cursor:pointer;font-family:"JetBrains Mono",monospace;letter-spacing:.12em;color:var(--dim)}.view-toggle button.on{color:var(--ink);border-color:var(--ink)}




.toolbar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:1rem 0;border-bottom:1px solid var(--line);margin-bottom:1.5rem}.toolbar .spacer{flex:1}
.chip{font:inherit;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:.35rem .8rem;cursor:pointer}
.link{font:inherit;border:0;background:none;cursor:pointer;text-decoration:underline}
.toolbar select{font:inherit;padding:.5rem .8rem;border-radius:10px;border:1px solid var(--line);background:var(--card)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;position:relative}.card.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.cover{display:block;aspect-ratio:4/3;background:repeating-linear-gradient(45deg,#f0f0f2 0 8px,#f7f7f8 8px 16px);border:0;padding:0;width:100%;cursor:pointer;position:relative}.cover img{width:100%;height:100%;object-fit:contain;background:#f3f3f5;display:block}.cover img[src=""]{display:none}
/* A locked album's card. The lock stands where the cover would be, so the grid keeps its rhythm
   rather than leaving a short card among tall ones -- same aspect-ratio, no image, not a button:
   there is nothing behind it to open until the passcode is in. */
.cover.locked{display:grid;place-items:center;font-size:2rem;cursor:default;background:repeating-linear-gradient(45deg,#f0f0f2 0 8px,#f7f7f8 8px 16px)}
.card.album.locked{border-style:dashed}
.badge{display:inline-block;margin:.15rem 0;padding:.1rem .5rem;border-radius:999px;border:1px solid var(--line);color:var(--dim);font-size:.75rem;letter-spacing:.02em}
/* The field takes the free space and the button sits beside it; on a narrow card they wrap, and
   the error owns a whole row of its own so it never squeezes the field it is about. */
.unlock{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.unlock input{flex:1 1 8rem;min-width:0;font:inherit;padding:.45rem .7rem;border-radius:10px;border:1px solid var(--line);background:var(--card)}
.unlock .notice{flex:1 0 100%;margin:0;font-size:.85rem}
.duration{position:absolute;right:.6rem;bottom:.6rem;background:#111;color:#fff;padding:.2rem .5rem;border-radius:6px}
.check{position:absolute;top:.6rem;left:.6rem;z-index:2;width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:#fff;color:transparent;cursor:pointer}.check.on{background:var(--accent);border-color:var(--accent);color:#fff}
.meta{padding:.8rem 1rem}.meta h3{margin:0 0 .3rem;font-size:1.05rem}.meta p{margin:.15rem 0}.dim{color:var(--dim)}.right{float:right}.name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selection{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);display:flex;align-items:center;gap:.75rem;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:.9rem 1.2rem;box-shadow:0 12px 40px rgba(0,0,0,.12);z-index:10;max-width:calc(100vw - 2rem);width:max-content}
.selection div{margin-right:auto}.selection div p{margin:.2rem 0 0}
.notice{color:var(--accent)}.selection .notice{margin:0;max-width:24rem;font-size:.85rem}.selection .notice:not(:empty){margin-top:.25rem}
.foot{display:flex;align-items:center;gap:1rem;padding:1.5rem 2rem;color:var(--dim);font-size:.9rem}
.lang a{display:inline-block;padding:.4rem .7rem;border-radius:8px;text-decoration:none}.lang a.on{background:#111;color:#fff}
@media (max-width:900px){.top{padding:1rem}.page{padding:0 1rem 7rem}}
/* The bar sits at left:50%, which left it half the screen to shrink into: on a 375 px phone it was
   188 px wide and 251 px tall, a column of its three parts over a third of the page (measured on
   press.archi.ge, 2026-09-11). width:max-content above sizes it by what it holds; on a phone it
   spans the screen, the count on its own row and the two buttons side by side under it. */
@media (max-width:520px){.selection{flex-wrap:wrap;left:1rem;right:1rem;width:auto;transform:none;padding:.75rem .9rem;gap:.5rem}.selection div{flex-basis:100%;margin-right:0}.selection .btn{flex:0 0 auto}.selection .btn.primary{flex:1}}
.upload{max-width:900px;margin:0 auto}.back{text-decoration:none;color:var(--dim)}.lead{font-size:1.1rem;max-width:60ch}
.steps{display:flex;gap:2rem;list-style:none;padding:1rem 1.5rem;margin:1.5rem 0;background:var(--card);border:1px solid var(--line);border-radius:14px}
.steps li{display:flex;align-items:center;gap:.6rem;color:var(--dim)}.steps li span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--line)}
.steps li.on{color:var(--ink);font-weight:600}.steps li.on span{border-color:var(--accent);color:var(--accent)}.steps li.done span{background:var(--accent);color:#fff;border-color:var(--accent)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.5rem 2rem;margin-bottom:1.5rem}
.panel h2.mono{font-size:.75rem;letter-spacing:.14em;color:var(--dim);margin:1.5rem 0 .75rem;font-weight:500}
.panel label{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem;font-weight:600}.panel label em{font-style:normal;font-family:"JetBrains Mono",monospace;font-size:.65rem;letter-spacing:.14em;color:var(--accent);margin-left:auto;white-space:nowrap}.panel label em.opt{color:var(--dim)}
/* The name and its Required/Optional tag are one line (span.lbl), so a field without a tag stands
   exactly as tall above its control as one with a tag. */
.panel label .lbl{display:flex;align-items:baseline;gap:.75rem}
.panel input,.panel select,.panel textarea{font:inherit;font-weight:400;padding:.8rem 1rem;border:1px solid var(--line);border-radius:10px;background:#fff}
.panel small{color:#b00020;font-weight:400}.two{display:grid;grid-template-columns:1fr 1fr;column-gap:1rem}
/* The two fields of a row share their label, control and error tracks through a subgrid, so the
   controls still line up when one name wraps (Georgian at tablet widths) or only one field shows
   an error. A shorter name sits on its control rather than floating at the top of the track. */
@supports (grid-template-rows:subgrid){.two>label{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:.35rem}.two>label>.lbl{align-self:end}}
.consent{flex-direction:row!important;align-items:flex-start;font-weight:400!important}.consent input{margin-top:.3rem}
.panel input.code{font-family:"JetBrains Mono",monospace;font-size:1.6rem;letter-spacing:.4em;text-align:left}
.row{display:flex;gap:.75rem;flex-wrap:wrap}.error{color:#b00020}
@media (max-width:700px){.two{grid-template-columns:1fr}.steps{flex-direction:column;gap:.6rem}.panel{padding:1.25rem}}

/* landing page: full-bleed hero, then the two routes */
.cover-hero{position:relative;display:grid;place-items:center;min-height:min(68vh,620px);background-size:cover;background-position:center;background-color:#2c3e4c}
.cover-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,16,16,.15),rgba(16,16,16,.5))}
.cover-hero h1{position:relative;z-index:1;margin:0;padding:0 1rem;color:#fff;text-align:center;font-size:clamp(2.1rem,6.4vw,4.6rem);font-weight:700;letter-spacing:.04em;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.scroll-cue{position:absolute;z-index:1;bottom:1.5rem;left:50%;transform:translateX(-50%);width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.9);color:#101010;text-decoration:none;font-size:1.2rem}
.choose{max-width:1080px;margin:0 auto;padding:3rem 2rem 1rem}
.choose h2{font-size:clamp(1.7rem,3.6vw,2.4rem);margin:0 0 2rem;letter-spacing:-.015em;font-weight:600}
.routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.route{position:relative;display:block;padding:2rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);text-decoration:none;transition:border-color .15s,transform .15s}
.route:hover{border-color:var(--ink);transform:translateY(-2px)}
.route-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--bg);font-size:1.2rem;margin-bottom:1.2rem}
.route h3{margin:0 0 .5em;font-size:1.35rem}
.route p{margin:0 0 1rem;color:#4a4a52}
.route-go{position:absolute;right:2rem;bottom:2rem;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:#fff}
.crumbs{padding:1.5rem 0 0;color:var(--dim);font-family:"JetBrains Mono",monospace;font-size:.8rem;letter-spacing:.1em}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}.crumbs span{margin:0 .5rem}
@media (max-width:900px){.choose{padding:2rem 1rem .5rem}.cover-hero{min-height:56vh}}

/* landing only: the header rides over the image, so the page opens on the photograph */
body.hero-page{position:relative}
body.hero-page .top{position:absolute;top:0;left:0;right:0;z-index:3;background:transparent}
body.hero-page .top .brand .mark{filter:brightness(0) invert(1)}
body.hero-page .top .lang a{color:#fff}
body.hero-page .top .lang a.on{background:#fff;color:#101010}
body.hero-page .cover-hero::after{background:linear-gradient(180deg,rgba(16,16,16,.45),rgba(16,16,16,.15) 35%,rgba(16,16,16,.5))}
.route{min-height:260px;display:flex;flex-direction:column}
.route p{flex:1}



@media (max-width:900px){body.hero-page .top{position:static;background:var(--bg)}body.hero-page .top .brand .mark{filter:none}body.hero-page .top .lang a{color:inherit}body.hero-page .top .lang a.on{background:#111;color:#fff}}
.lang{display:flex;align-items:center;gap:.5rem;margin-left:.5rem}
.lang a.globe{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .55rem;border-radius:8px;text-decoration:none;color:inherit;border:1px solid var(--line);white-space:nowrap;flex-shrink:0;line-height:1}
.lang a.globe svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lang a.globe .globe-code{font-size:.85rem;letter-spacing:.02em}
.lang a.globe:hover{background:rgba(0,0,0,.05)}
.clocks{display:grid;grid-template-columns:repeat(8,1fr);gap:1rem;margin-top:2rem;padding:1.75rem 1rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
.clock{margin:0;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.clock-face{width:100%;max-width:88px;aspect-ratio:1}
.clock-dial{fill:#fff;stroke:var(--line);stroke-width:2}
.clock-tick{stroke:#b9b9c2;stroke-width:2;stroke-linecap:round}
.clock-tick-major{stroke:#5c5c66;stroke-width:3}
.clock-hand{stroke:#101010;stroke-linecap:round}
.clock-hour{stroke-width:4.5}
.clock-minute{stroke-width:3}
.clock-second{stroke:#2f5bff;stroke-width:1.6}
.clock-pin{fill:#101010}
.clock figcaption{display:flex;flex-direction:column;align-items:center;gap:.1rem;text-align:center}
.clock-city{font-size:.8rem;color:#4a4a52;line-height:1.2}
.clock-digits{font-family:"JetBrains Mono",monospace;font-size:1rem;font-variant-numeric:tabular-nums}
@media (max-width:900px){.clocks{grid-template-columns:repeat(4,1fr)}}
@media (max-width:480px){.clocks{grid-template-columns:repeat(2,1fr);padding:1.25rem .75rem}}
/* the header is transparent over the hero on the landing page, so its controls invert */
body.hero-page .lang a.globe{border-color:rgba(255,255,255,.45)}
body.hero-page .lang a.globe:hover{background:rgba(255,255,255,.15)}