/* index.html — the hero is the only thing on this page that the others do not share.
 * Loaded after site.css.
 *
 * The original inline block also carried .rrow and .rv rules, which no element on this
 * page uses (they belong to restaurants.html). Dropped rather than carried forward.
 */

/* ---------- shelf tiles ---------- */

/* The homepage used to show six individual garments. With 150 pieces across six shelves
   that is the wrong unit: six arbitrary items tell a first-time visitor nothing about what
   the wardrobe holds, and the chance any one of them is the thing they came for is poor.
   A shelf with a count answers "what do you have?" and lets someone pick a lane.

   Same .frame/.grain/.cap vocabulary as the product cards, so the front page still looks
   like the shop it leads into. */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (min-width:641px){.tiles{grid-template-columns:repeat(3,1fr);gap:14px}}
/* A fourth shelf tile once the wrap is wide enough to carry one without shrinking the
   others below the size their photograph needs. Eight shelves divide evenly by four. */
@media (min-width:1400px){.tiles{grid-template-columns:repeat(4,1fr);gap:16px}}

.tile{
  display:flex;flex-direction:column;
  border:1px solid rgba(58,30,22,.2);background:var(--void-2);
  transition:transform .15s,border-color .15s;
}
.tile .frame{aspect-ratio:1/1;border:none;border-bottom:1px solid rgba(58,30,22,.2)}
/* The count sits in the caption slot the product cards use for the category name — bottom
   left, on the photograph, over the same scrim. */
.tile .frame .cap{font-size:var(--fs-2xs);letter-spacing:.06em}
.tile .tbody{padding:12px 12px 14px;display:flex;flex-direction:column;flex:1 1 auto;gap:3px}
.tile h3{
  font-size:var(--fs-s);font-weight:600;line-height:var(--lh-snug);text-transform:uppercase;letter-spacing:.02em;
  color:var(--bone);
}
.tile .tcz{font-size:var(--fs-2xs);letter-spacing:.04em;color:var(--bone-dim);opacity:.85}
.tile:hover{transform:translateY(-2px);border-color:rgba(232,169,60,.35)}
.tile:hover h3{color:var(--magenta)}
.tile:hover .frame{filter:brightness(1.06)}
.tile:focus-visible{outline:2px solid var(--magenta);outline-offset:3px}

/* The "everything" tile has no photograph — it is a destination, not a shelf. It fills the
   last cell of the grid and inverts the emphasis so it reads as the way past the shelves
   rather than as a seventh one. */
.tile-all{
  border-color:rgba(232,169,60,.4);
  background:linear-gradient(150deg,rgba(232,169,60,.14),transparent 70%),var(--void-2);
  justify-content:center;
}
.tile-all .tbody{padding:18px 14px;gap:6px;justify-content:center}
.tile-all h3{font-size:var(--fs-m);color:var(--magenta)}
.tile-all .more{
  margin-top:8px;font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--saffron);
}

@media (min-width:641px){
  .tile .tbody{padding:14px 15px 16px}
  .tile h3{font-size:var(--fs-m)}
}

@media (prefers-reduced-motion:reduce){
  .tile:hover{transform:none}
}

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

.hero{position:relative;border-bottom:1px solid rgba(58,30,22,.22);overflow:hidden}

.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(60% 80% at 12% 20%, rgba(155,59,119,.20), transparent 55%),
    radial-gradient(55% 70% at 88% 15%, rgba(232,169,60,.28), transparent 50%),
    radial-gradient(70% 90% at 75% 95%, rgba(200,67,46,.20), transparent 55%),
    radial-gradient(50% 60% at 40% 70%, rgba(126,138,40,.16), transparent 55%),
    var(--void);
}
.hero-bg::after{
  content:"";position:absolute;inset:0;opacity:.10;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='hg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23hg)'/%3E%3C/svg%3E");
}

/* padding-block, not the shorthand — see the note on .sec-inner in site.css.
   `padding:52px 0 48px` cancelled .wrap`s inline gutter and put the hero hard against
   both screen edges. */
.hero-inner{position:relative;z-index:2;padding-block:52px 48px}
/* Bone on chilli, not void-on-paprika. Dark text on paprika measured 2.29:1 — and
   paprika has so little headroom that only near-black clears AA on it (4.44:1 at
   #14110E), which reads as a printing error against this warm palette. Flipping to light
   text on the deeper chilli red gives 4.73:1 while keeping the chip unmistakably red. */
.hero .label{font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--bone);background:var(--chilli);display:inline-block;padding:6px 12px;margin-bottom:22px;font-weight:500}

/* ---------- the greeting reel ----------
 *
 * Replaced the static "Czech-In" chip on 24 Aug 2026. The site is published in eight
 * languages and nothing above the fold said so; the language pill in the header is a
 * control, not an announcement, and a visitor who cannot read English does not go looking
 * in a header for a way out. A greeting cycling through the eight is the announcement.
 *
 * CSS ONLY, and not merely out of taste: style-src is 'self', so the per-word delays this
 * needs cannot be inline style attributes. One keyframe track on one element avoids the
 * whole question.
 *
 * The reel is a column of words translated upward one line at a time. The first word is
 * REPEATED at the end so the last step slides into an identical frame and the loop closes
 * without a visible rewind.
 *
 * The box never changes size — a chip that resized on each word would shove the H1 below it
 * on every rotation, eight times a cycle, which is a layout shift a visitor feels even when
 * they cannot say what moved. min-width is set from the longest greeting (the Russian) and
 * the words are LEFT-aligned inside it: the chip sits above a left-aligned headline and
 * lede, so centring would make the text's left edge wander against a strong margin line
 * while the box itself stayed still.
 *
 * Centred for an afternoon on 25 Aug 2026 and reverted the same day, on looking at it: the
 * wandering left edge is the more visible of the two faults, because the H1 immediately
 * below gives the eye a hard vertical to measure every greeting against.
 */
.hero .label.welcome{
  /* One line tall, and the height is fixed here rather than inherited so the reel's step
     distance and the chip's height are the same number in both places. */
  /* 1.3333em, which is the 16px this was until 25 Aug 2026 at the chip's 12px — the same
     number, expressed so it follows the type instead of asserting a pixel height over it.
     A hard 16px is only correct while the line is exactly 12px tall in the loaded face: let
     the text render larger for any reason — OS text scaling, or the fallback face during the
     webfont race — and the step distance and the line height stop agreeing, so the words
     drift out of the one-line window mid-cycle. In em they cannot disagree. */
  --wh:1.3333em;
  padding-top:6px;padding-bottom:6px;
  /* Measured, not guessed: the longest greeting is the Russian at 139px, and box-sizing is
     border-box, so 139 + 24px of padding = 163px. 14em is 168px at this 12px font — five
     pixels of slack for the fallback face if the webfont has not landed yet, and no more.
     The earlier 15.5em was 23px wider than any word in the reel. */
  min-width:14em;
  text-align:left;
}
/* The clipping window, and it is a SEPARATE element from the chip on purpose: overflow
   clips to the PADDING box, so hiding the overflow on the padded chip itself left the 6px
   of padding above and below showing a slice of the previous and next word — three
   greetings on screen at once. The window is exactly one line tall and carries no padding,
   so there is nowhere for a neighbour to show through. */
.hero .label.welcome .reel{
  display:block;height:var(--wh);overflow:hidden;
}
.hero .label.welcome .track{
  display:block;
  /* Not steps(): that would snap from word to word. Each word holds for 1.76s and then
     slides over 0.44s, which is the 80/20 that reads as a reel rather than a flicker. */
  animation:greet 17.6s cubic-bezier(.65,0,.35,1) infinite;
}
.hero .label.welcome .track b{
  display:block;height:var(--wh);line-height:var(--wh);font-weight:500;white-space:nowrap;
}

/* Eight words, 2.2s each. Slower than ~3s and most visitors never see a second language;
   faster than ~2s and it reads as a flicker rather than a greeting. */
@keyframes greet{
  0%,10%     {transform:translateY(0)}
  12.5%,22.5%{transform:translateY(calc(var(--wh) * -1))}
  25%,35%    {transform:translateY(calc(var(--wh) * -2))}
  37.5%,47.5%{transform:translateY(calc(var(--wh) * -3))}
  50%,60%    {transform:translateY(calc(var(--wh) * -4))}
  62.5%,72.5%{transform:translateY(calc(var(--wh) * -5))}
  75%,85%    {transform:translateY(calc(var(--wh) * -6))}
  87.5%,97.5%{transform:translateY(calc(var(--wh) * -7))}
  100%       {transform:translateY(calc(var(--wh) * -8))}
}

/* Motion is decoration here: the greeting is not information a visitor loses by seeing only
   one of them, and the accessible name is a single static "Welcome" either way. */
@media (prefers-reduced-motion:reduce){
  .hero .label.welcome .track{animation:none}
}
/* line-height must stay above 1 here: the b is a highlight block whose background box is
   taller than the em, so at 1.0 the second line's block bit into the first one's. This
   face's background box measures 1.30em, so anything under that overlaps no matter the
      clamp size; 1.4 leaves a clean sliver of daylight from 34px up to 86px. */
.hero h1{font-weight:300;font-size:clamp(2.125rem,1rem + 5.6vw,5.375rem);line-height:1.4;letter-spacing:-.02em;max-width:16ch;color:#F2EFE6}
.hero h1 b{font-weight:600;color:var(--void);background:var(--magenta);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* Shares the heading column with the H1 above it, same reasoning as .page-head in site.css:
   the two used to be 826px and 490px, which is a ragged edge rather than a step. */
.hero .sub{margin-top:22px;color:var(--bone-dim);font-size:var(--fs-l);max-width:var(--head-col)}
.hero-cta{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}

/* The decorative "PRAHA / IND MMXXVI" corner stamp was removed 17 Aug 2026 — it named the
   city and the year, both of which the page says in words that do something. */

@media (min-width:641px){
  .hero-inner{padding-block:96px 84px}
  .hero .label{margin-bottom:26px}
  .hero .sub{margin-top:26px}
  .hero-cta{margin-top:34px}
}