/* «ԱԼԻԲԻ» դետեկտիվ բյուրո: the site's design system (tokens + components).
   A case file, not a template: white and a cool grey, black ink, the bureau's red used boldly.
   Headlines and text in Noto Sans Armenian; Adamathuz, the logo's heavy capitals, is an accent only: the name, stamps,
   the case label's band, the big numbers. Square corners everywhere. */

@font-face { font-family:"Adamathuz"; src:url("/assets/fonts/Adamathuz-Bold.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Noto Sans Armenian"; src:url("/assets/fonts/NotoSansArmenian-armenian.woff2") format("woff2"); font-weight:400 700; font-display:swap; unicode-range:U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17; }
@font-face { font-family:"Noto Sans Armenian"; src:url("/assets/fonts/NotoSansArmenian-latin.woff2") format("woff2"); font-weight:400 700; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2116, U+2122, U+2212; }
@font-face { font-family:"Zizis"; src:url("/assets/fonts/ZizisHandwriting-Regular.woff2") format("woff2"); font-display:swap; }

:root {
  color-scheme: light;
  --paper:#ffffff;      /* the page */
  --grey:#f1f1f2;       /* the alternate ground: a cool grey, never cream */
  --ink:#141414;        /* text, borders, rules */
  --ink-2:#47474b;      /* secondary text */
  --ink-3:#66666b;      /* small print (5.6:1 on paper, 5.0:1 on grey) */
  --line:#d6d6d9;       /* hairlines */
  --red:#b3191f;        /* the bureau's red: bars, bands, buttons, stamps (white text 6.6:1) */
  --red-dark:#8a1116;   /* hover on red */
  --red-wash:#fbecec;   /* an invalid field */
  --pen:#1c3f9e;        /* the detective's pen */

  --display:"Adamathuz", "Noto Sans Armenian", sans-serif;   /* the accent: Armenian capitals and digits */
  --text:"Noto Sans Armenian", sans-serif;
  --hand:"Zizis", cursive;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px; --s9:104px;
  --shadow-print:0 1px 2px rgba(0, 0, 0, .18), 0 8px 22px rgba(0, 0, 0, .14);   /* a photo print or a sheet on the table */
  --wrap:1200px;
}

* { box-sizing:border-box; border-radius:0; }
html { background:var(--paper); scroll-behavior:smooth; overflow-x:clip; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
body { margin:0; color:var(--ink); background:var(--paper); font:400 1.0625rem/1.6 var(--text); overflow-wrap:break-word; }
body:not(.archived) { display:flex; flex-direction:column; min-height:100vh; min-height:100svh; }   /* a short page keeps its footer at the bottom */
body:not(.archived) > main { flex:1 0 auto; }
main.wrap { padding-bottom:clamp(48px, 7vw, 96px); }   /* the pages that are one column of content: room before the footer */
[id] { scroll-margin-top:96px; }   /* a link to a part of the page stops below the sticky header */
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--ink); outline-offset:2px; }
.red :focus-visible { outline-color:#fff; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 clamp(16px, 4vw, 40px); }

/* ---------- type ---------- */
.display, h1, h2, .h1, .h2 { margin:0; font-family:var(--text); font-weight:700; line-height:1.14; letter-spacing:-.015em; text-wrap:balance; }
.display { font-size:clamp(2.3rem, 5vw, 4rem); line-height:1.06; letter-spacing:-.025em; }
h1, .h1 { font-size:clamp(1.9rem, 3.6vw, 3rem); }
h2, .h2 { font-size:clamp(1.6rem, 2.8vw, 2.4rem); }
h3, .h3 { margin:0; font:700 1.15rem/1.3 var(--text); }
.lede { font-size:clamp(1.06rem, 1.35vw, 1.2rem); line-height:1.55; color:var(--ink-2); max-width:36em; margin:0; }
.muted { color:var(--ink-2); }
.small { font-size:.9rem; }
.hand { font-family:var(--hand); color:var(--pen); }
.case-no { margin:0; font:700 .95rem/1.2 var(--text); color:var(--red); }   /* «Գործ № ALB26-01» over a title */

/* ---------- top bar, header, footer ---------- */
.topbar { background:var(--red); color:#fff; text-align:center; font-weight:700; font-size:.95rem; padding:9px 16px; text-wrap:balance; }
.topbar a { color:#fff; text-underline-offset:3px; }
.topbar s { opacity:.8; font-weight:400; }
.site-head { position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:2px solid var(--ink); }
.site-head .wrap { display:flex; align-items:center; gap:var(--s5); height:72px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; flex:none; }
.brand img { width:52px; height:52px; }
.brand b { display:block; font:700 1.5rem/1 var(--display); }
.brand small { display:block; margin-top:3px; font:700 .74rem/1 var(--display); color:var(--red); }
.nav { display:flex; gap:var(--s5); margin-left:auto; align-items:center; }
.nav a { text-decoration:none; font-weight:700; font-size:.98rem; padding:4px 0; border-bottom:3px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color:var(--red); }
.nav .btn { padding:6px 18px; border:2px solid var(--red); }
.nav .btn:hover { border-color:var(--red-dark); }
@media (max-width:760px) {
  .site-head .wrap { gap:var(--s3); height:62px; }
  .brand img { width:42px; height:42px; }
  .brand span { display:none; }
  .nav { gap:var(--s4); }
  .nav a:not(.btn) { font-size:.92rem; }
  .nav .hide-s { display:none; }
}
.site-foot { border-top:2px solid var(--ink); font-size:.94rem; }
.site-foot .wrap { display:flex; flex-wrap:wrap; gap:var(--s5) var(--s7); align-items:flex-start; justify-content:space-between; padding-top:var(--s6); padding-bottom:var(--s5); }
.site-foot ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 22px; font-weight:700; }
.site-foot a { text-decoration:none; }
.site-foot a:hover { color:var(--red); text-decoration:underline; }
.site-foot .legal { flex:1 1 100%; display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s2) var(--s6); border-top:1px solid var(--line); padding-top:var(--s4); color:var(--ink-3); font-size:.88rem; }
.site-foot p { margin:0; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:8px 28px; border:2px solid var(--red);
       background:var(--red); color:#fff; font:700 1.05rem/1.15 var(--text); text-decoration:none; text-align:center; cursor:pointer; transition:background .12s, color .12s, border-color .12s; }
.btn:hover { background:var(--red-dark); border-color:var(--red-dark); }
.btn-line { background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-line:hover { background:var(--ink); border-color:var(--ink); color:#fff; }
.btn-white { background:#fff; color:var(--red); border-color:#fff; }
.btn-white:hover { background:var(--ink); border-color:var(--ink); color:#fff; }
.btn-sm { min-height:42px; padding:6px 18px; font-size:.95rem; }
.btn-block { width:100%; }
.btn:disabled { opacity:.6; cursor:wait; }
.link { color:var(--red); font-weight:700; text-underline-offset:3px; }

/* ---------- grounds ---------- */
.section { padding:clamp(48px, 7vw, 96px) 0; }
.grey { background:var(--grey); }
.red { background:var(--red); color:#fff; }
.red .lede, .red .muted { color:#fff; }
.cta-row { display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; margin-top:var(--s6); }
.cta-row.mid { justify-content:center; margin-top:var(--s7); }   /* under a row of pictures: in the middle, well clear of them */   /* a section's own way to the order page */
.red .link { color:#fff; }
.section-head { display:grid; gap:var(--s3); margin-bottom:var(--s6); max-width:50rem; }

/* ---------- stamp ---------- */
.stamp { display:inline-block; padding:.38em .7em .3em; border:3px solid currentColor; outline:1px solid currentColor; outline-offset:2px; color:var(--red);
         font:700 1rem/1 var(--display); text-transform:uppercase; transform:rotate(-5deg);
         -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.4 1.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
         mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.4 1.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E"); }

/* ---------- the case label (the sticker on the game's bag: a red band, ruled fields written by hand, the photo) ---------- */
.case-label { background:#fff; border:2px solid var(--ink); box-shadow:var(--shadow-print); max-width:560px; }
.case-label .band { background:var(--red); color:#fff; padding:8px 16px; font:700 .95rem/1.2 var(--display); text-transform:uppercase; text-align:center; }
.case-label .body { display:grid; grid-template-columns:minmax(0, 1fr) 34%; gap:16px; padding:16px; }
.case-label dl { margin:0; display:grid; gap:10px; align-content:start; }
.case-label dt { font:700 .72rem/1 var(--text); color:var(--ink-3); text-transform:uppercase; }
.case-label dd { margin:2px 0 0; padding-bottom:3px; border-bottom:1px solid var(--ink); font:400 1.45rem/1.15 var(--hand); color:var(--pen); }
.case-label .two { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.case-label .photo { position:relative; }
.case-label .photo img { width:100%; aspect-ratio:4 / 5; object-fit:cover; border:1px solid var(--ink); }
.case-label .photo .stamp { position:absolute; left:-18%; bottom:10%; font-size:.8rem; background:rgba(255, 255, 255, .88); }

/* ---------- photo prints ---------- */
.print { margin:0; background:#fff; padding:8px; box-shadow:var(--shadow-print); }
.print:has(figcaption) { padding-bottom:10px; }
.print img { width:100%; object-fit:cover; }
.print figcaption { padding:8px 4px 0; }
.tilt-l { transform:rotate(-1.5deg); }
.tilt-r { transform:rotate(1.5deg); }

/* ---------- facts: one ruled strip ---------- */
.facts { display:flex; flex-wrap:wrap; margin:0; border:2px solid var(--ink); background:#fff; }
.facts > div { flex:1 1 auto; padding:10px 16px; border-right:1px solid var(--ink); margin-right:-1px; margin-bottom:-1px; border-bottom:1px solid var(--ink); }
.facts dt { font:700 .72rem/1.2 var(--text); color:var(--ink-3); text-transform:uppercase; }
.facts dd { margin:2px 0 0; font:700 1.1rem/1.2 var(--text); white-space:nowrap; }
@media (max-width:560px) { .facts > div { flex:1 1 40%; } }   /* two and two, not three and one */
.dots { display:inline-flex; gap:4px; vertical-align:middle; }
.dots i { width:12px; height:12px; border:2px solid var(--red); }
.dots i.on { background:var(--red); }

/* ---------- price ---------- */
.price { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; }
.price .now { font:700 clamp(2.1rem, 3.4vw, 2.7rem)/1 var(--text); }
.price .was { color:var(--ink-3); text-decoration:line-through; text-decoration-color:var(--red); text-decoration-thickness:2px; font-size:1.2rem; }
.price .save { background:var(--red); color:#fff; font:700 .9rem/1 var(--text); padding:6px 10px; }   /* on the price's own baseline, like the old price */

/* ---------- the night's timeline ---------- */
.timeline { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); border-top:3px solid var(--ink); }
.timeline li { position:relative; padding:18px 16px 0 0; }
.timeline li::before { content:""; position:absolute; top:-9px; left:0; width:15px; height:15px; background:var(--red); }
.timeline time { display:block; font:700 1.7rem/1 var(--display); }
.timeline p { margin:6px 0 0; font-size:.95rem; color:var(--ink-2); }
@media (max-width:700px) { .timeline { grid-template-columns:1fr; border-top:0; border-left:3px solid var(--ink); } .timeline li { padding:0 0 22px 22px; } .timeline li::before { top:6px; left:-9px; } }

/* ---------- suspects ---------- */
.suspects { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:16px; }
.suspects .print img { aspect-ratio:2 / 3; }   /* the whole print: the name is written on it, low on some */
.suspects b { display:block; font:700 .78rem/1.2 var(--text); color:var(--red); text-transform:uppercase; }
.suspects p { margin:4px 0 0; font-size:.9rem; line-height:1.45; color:var(--ink-2); }
@media (max-width:900px) { .suspects { grid-auto-flow:column; grid-auto-columns:62%; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 4px 18px; margin:0 -16px; padding-left:16px; padding-right:16px; }
  .suspects > * { scroll-snap-align:center; transform:none; } }

/* ---------- steps (on the red band) ---------- */
.steps { counter-reset:step; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--s6); }
.steps li { border-top:3px solid currentColor; padding-top:14px; }
.steps li::before { counter-increment:step; content:counter(step); display:block; font:700 3.4rem/1 var(--display); margin-bottom:8px; }
.steps h3 { font-size:1.25rem; margin-bottom:6px; }
.steps p { margin:0; }
@media (max-width:760px) { .steps { grid-template-columns:1fr; gap:var(--s5); } .steps li { display:grid; grid-template-columns:56px 1fr; column-gap:12px; } .steps li::before { grid-row:1 / 3; font-size:2.8rem; } }

/* ---------- what is in the box: a short count list ---------- */
.inside { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); gap:clamp(24px, 5vw, 64px); align-items:center; }
.counts { list-style:none; margin:var(--s5) 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; border-top:2px solid var(--ink); }
.counts li { display:flex; align-items:baseline; gap:12px; padding:11px 8px 11px 0; border-bottom:1px solid var(--line); }
.counts b { font:700 1.5rem/1 var(--display); min-width:1.6em; color:var(--red); }
@media (max-width:860px) { .inside { grid-template-columns:1fr; } }
@media (max-width:480px) { .counts { grid-template-columns:1fr; } }

/* ---------- forms ---------- */
.field { display:grid; gap:6px; }
.field label { font-weight:700; font-size:.97rem; }
.field input, .field select, .field textarea { width:100%; min-height:50px; padding:12px 14px; border:2px solid var(--ink); background:#fff; color:var(--ink); font:inherit; font-size:1rem; }
.field textarea { min-height:96px; resize:vertical; }
.field select { appearance:none; -webkit-appearance:none; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23141414' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; }
.field input::placeholder, .field textarea::placeholder { color:#85858a; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline:3px solid var(--red); outline-offset:0; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color:var(--red); background:var(--red-wash); }
.field .err { display:none; color:var(--red); font-size:.9rem; font-weight:700; }
.field.invalid .err { display:block; }
.check { display:flex; gap:12px; align-items:flex-start; font-size:.97rem; }
.check input { width:22px; height:22px; margin:1px 0 0; accent-color:var(--red); flex:none; }
.qty { display:inline-flex; align-items:center; border:2px solid var(--ink); background:#fff; }
.qty button { width:46px; height:50px; border:0; background:transparent; color:var(--ink); font-size:1.3rem; cursor:pointer; }
.qty button:hover { background:var(--grey); }
.qty output { min-width:34px; text-align:center; font-weight:700; }
.trap { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.box { background:#fff; border:2px solid var(--ink); padding:clamp(18px, 3vw, 28px); }

/* ---------- faq ---------- */
.faq { border-top:2px solid var(--ink); max-width:56rem; }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:var(--s4); padding:var(--s4) 0; font-weight:700; font-size:1.06rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font:700 1.5rem/1 var(--text); color:var(--red); }
.faq details[open] summary::after { content:"−"; }
.faq details > div { padding:0 0 var(--s5); color:var(--ink-2); max-width:46rem; }
.faq details > div p { margin:0 0 .6em; }

/* ---------- archive bar (the web archive's own chrome over an archived page) ---------- */
.archive-bar { position:sticky; top:0; z-index:60; background:#fff; color:var(--ink); border-bottom:2px solid var(--ink); font:14px/1.35 var(--text); }
.archive-bar .in { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; max-width:1280px; margin:0 auto; padding:8px 16px; }
.archive-bar .logo { font:700 17px/1 var(--display); color:var(--red); text-decoration:none; white-space:nowrap; text-transform:uppercase; }
.archive-bar .url { flex:1 1 280px; min-width:0; background:var(--grey); border:1px solid var(--line); padding:6px 10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
                    color:var(--ink-2); font-family:ui-monospace, Menlo, Consolas, monospace; font-size:13px; }
.archive-bar .when { color:var(--ink-2); white-space:nowrap; }
.archive-bar .when b { color:var(--ink); }
.archive-bar .game { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.archive-bar .game span { color:var(--ink-2); }
.archive-bar .game a { color:#fff; background:var(--red); text-decoration:none; padding:8px 12px; font:700 13px/1 var(--text); white-space:nowrap; }
.archive-bar .game a.plain { background:none; color:var(--ink); text-decoration:underline; padding:8px 0; }
@media (max-width:640px) { .archive-bar .in { font-size:12px; } .archive-bar .game span { display:none; } }
html:has(body.archived) { background:#fff; }