/* Pivnice U Hvězd — colours taken from the building: facade yellow, the sign's red and slate, the star's white. */
:root {
  --yellow: #E8C84A;
  --yellow-step: #DDBB3C;
  --ink: #1D1E20;
  --slate: #4B5157;
  --red: #C62B2B;
  --red-step: #B22424;
  --red-deep: #8F1C1C;
  --paper: #F2F2EE;
  --paper-step: #E3E3DD;

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --text: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  --step-small: 0.875rem;
  --step-body: clamp(1.125rem, 1.05rem + 0.2vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --step-sub: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  --step-head: clamp(2.75rem, 1.6rem + 4.2vw, 5.5rem);
  --step-display: clamp(4.5rem, 1.5rem + 9.6vw, 10rem);

  --m: clamp(16px, 2.4vw, 32px);
  --gap: clamp(96px, 6vw + 60px, 180px);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;

  /* the sign's diamond, used as a mask and as the button's pointed ends */
  --diamond: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  --tip: 0.9em;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--yellow);
  color: var(--ink);
  font: 400 var(--step-body)/1.5 var(--text);
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}
img, svg, iframe { display: block; max-width: 100%; }
h1, h2, h3, p, ul, figure, address { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
address { font-style: normal; }
::selection { background: var(--ink); color: var(--yellow); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--m); top: -100px; background: var(--ink); color: var(--paper); padding: 12px 16px; z-index: 20; }
.skip:focus { top: 12px; }

/* Placeholders the owner still has to fill */
.ph { background: var(--paper); color: var(--ink); padding: 0 0.25em; font-weight: 500; }

/* Type */
.h2 {
  font: 800 var(--step-head)/0.95 var(--display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.h3 { font: 700 var(--step-lead)/1.15 var(--text); letter-spacing: -0.01em; }

/* Links and buttons */
.link {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--t-hover) ease;
}
.link--strong { font-weight: 700; text-decoration-color: currentColor; }
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: currentColor; } }

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 calc(var(--tip) + 1.1em);
  color: var(--btn-fg);
  background: var(--btn-bg);
  clip-path: polygon(var(--tip) 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, var(--tip) 100%, 0 50%);
  font: 700 var(--step-body)/1 var(--text);
  text-decoration: none;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
  user-select: none;
}
.btn:active { transform: scale(0.97); }
/* the clip hides an outline, so focus is shown by the fill */
.btn:focus-visible { outline: none; --btn-bg: var(--red); --btn-fg: var(--paper); text-decoration: underline; text-underline-offset: 0.2em; }
@media (hover: hover) and (pointer: fine) { .btn:hover { --btn-bg: var(--red-deep); } }
.btn--paper { --btn-bg: var(--paper); --btn-fg: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn--paper:hover { --btn-bg: var(--yellow); } }
.btn--small { min-height: 44px; font-size: var(--step-small); }

.diamond-mask { clip-path: var(--diamond); overflow: hidden; }
.diamond-mask img { width: 100%; height: 100%; object-fit: cover; }

/* Header */
.bar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--m);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 800 2rem/1 var(--display);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.wordmark__mark { width: 36px; height: 36px; }
.nav__list { display: flex; gap: clamp(16px, 2vw, 32px); font-weight: 500; }
.nav__list a { color: var(--ink); }
.nav__small { display: none; }

/* Hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 120px var(--m) 96px;
  overflow: clip;
}
.hero__sign {
  position: absolute;
  width: 120vh;
  height: 120vh;
  left: 78%;
  top: calc(60vh + 92px);
  translate: -50% -50%;
  max-width: none;
}
.hero__text { position: relative; max-width: min(46vw, 640px); }
.hero__title {
  font: 800 var(--step-display)/0.88 var(--display);
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.hero__title .line { display: block; overflow: clip; padding: 0.16em 0 0.04em; margin-top: -0.16em; }
.hero__title .line > span { display: block; }
.hero__lead { margin-top: 40px; font-size: var(--step-lead); line-height: 1.4; max-width: 30ch; }
.status { margin-top: 24px; display: flex; gap: 12px; align-items: baseline; font-weight: 500; max-width: 36ch; }
.status__mark { flex: none; width: 12px; height: 12px; fill: var(--ink); translate: 0 1px; }
[data-open="true"] .status__mark { fill: var(--red); }
.hero__actions { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }

/* Menu */
.section { padding: var(--gap) var(--m) 0; }
.menu__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
}
.menu__intro { margin-top: 20px; max-width: 40ch; }
.menu__pic { width: clamp(160px, 22vw, 320px); aspect-ratio: 1; }
.menu__group { margin-top: 96px; }
.menu__group:first-of-type { margin-top: 72px; }
.menu__cat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 40px;
}
.menu__cat .h3 { font: 800 var(--step-sub)/1 var(--display); letter-spacing: -0.015em; }
.menu__count { font-size: var(--step-small); font-weight: 500; }
.menu__items { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; row-gap: 36px; }
.item { position: relative; padding-left: 36px; }
.item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 16px;
  height: 16px;
  background: var(--red);
  clip-path: var(--diamond);
}
.item__row { display: flex; justify-content: space-between; gap: 16px; font-weight: 700; }
.item__price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.item__desc { margin-top: 4px; font-size: var(--step-small); max-width: 38ch; }

/* The place: inset slate panel */
.place { padding: var(--gap) 20px 0; }
.place__panel {
  position: relative;
  min-height: 100svh;
  background: var(--slate);
  color: var(--paper);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  padding: 56px;
  column-gap: 56px;
}
.place__statement { grid-column: 1; color: var(--yellow); }
.place__blocks {
  grid-column: 2;
  grid-row: 1 / 3;
  display: grid;
  align-content: start;
  gap: 48px;
  max-width: 420px;
  margin-left: 18%;
}
.place__blocks p { margin-top: 12px; }
.place__blocks .btn { justify-self: start; }
.place__pic {
  position: absolute;
  width: min(42vw, 760px);
  aspect-ratio: 1;
  left: 56px;
  bottom: calc(min(42vw, 760px) * -0.2);
}
.place__pic img { animation: drift 24s var(--ease-soft) infinite alternate; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.07) translate(-1%, 1%); } }

/* Hours: stepped tiles */
.tiles {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 8px;
  align-items: start;
}
.tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
  clip-path: polygon(0 0, calc(100% - 56px) 0, 100% 56px, 100% 100%, 0 100%);
}
.tile__fig { font: 800 var(--step-head)/0.95 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tile__cap { max-width: 28ch; font-weight: 500; }
.tile--a { grid-column: 1 / 7; grid-row: 1 / 3; height: 70vh; min-height: 460px; background: var(--red); color: var(--paper); }
.tiles__heading { grid-column: 7 / 13; grid-row: 1; align-self: end; padding-bottom: 24px; min-height: 14vh; display: flex; align-items: flex-end; }
.tile--b { grid-column: 7 / 10; grid-row: 2; height: 44vh; min-height: 300px; background: var(--ink); color: var(--paper); }
.tile--c { grid-column: 10 / 13; grid-row: 2; margin-top: 12vh; height: 34vh; min-height: 240px; background: var(--slate); color: var(--paper); }

.week {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 64px;
  margin-top: 72px;
  align-items: start;
}
.week__now { display: flex; gap: 14px; align-items: baseline; font-size: var(--step-lead); line-height: 1.35; font-weight: 500; max-width: 26ch; }
.week__now .status__mark { width: 16px; height: 16px; }
.week__table { width: 100%; border-collapse: collapse; }
.week__table th, .week__table td { padding: 12px 0; text-align: left; border-bottom: 2px solid var(--yellow-step); }
.week__table th { font-weight: 500; }
.week__table td { text-align: right; }
.week__table tr.is-today { background: var(--ink); color: var(--yellow); }
.week__table tr.is-today th, .week__table tr.is-today td { padding-inline: 16px; }
.week__table tr.is-today th::after { content: " · dnes"; font-weight: 400; }

/* Visit */
.visit { margin-top: var(--gap); background: var(--paper); padding: var(--gap) var(--m); }
.visit__inner { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.visit__address { margin-top: 32px; font: 800 var(--step-sub)/1.05 var(--display); }
.visit__text > p { margin-top: 20px; max-width: 36ch; }
.visit__actions { margin-top: 36px; }
.visit__map {
  aspect-ratio: 4 / 3;
  background: var(--paper-step);
  clip-path: polygon(0 0, calc(100% - 96px) 0, 100% 96px, 100% 100%, 96px 100%, 0 calc(100% - 96px));
}
.visit__map iframe { width: 100%; height: 100%; border: 0; }

/* Contact: a tear-off ticket */
.contact { padding-bottom: var(--gap); }
.ticket {
  --notch: 14px;
  position: relative;
  display: grid;
  grid-template-columns: 46% 10px 1fr;
  margin-inline: calc(100% / 12);
  min-height: 360px;
  overflow: hidden;
  background: var(--red);
  color: var(--paper);
}
.ticket__stub { padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.ticket__stub .h2 { font-size: var(--step-sub); }
.ticket__stub p { max-width: 32ch; }
.ticket__perf {
  position: relative;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14'%3E%3Ccircle cx='5' cy='7' r='2.5' fill='%23E8C84A'/%3E%3C/svg%3E") center / 10px 14px repeat-y;
  background-clip: content-box;
  padding-block: 28px;
}
/* the two notches where the ticket tears */
.ticket__perf::before, .ticket__perf::after {
  content: "";
  position: absolute;
  left: 50%;
  width: calc(var(--notch) * 2);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--yellow);
  translate: -50% 0;
}
.ticket__perf::before { top: calc(var(--notch) * -1); }
.ticket__perf::after { bottom: calc(var(--notch) * -1); }
.ticket__lines { padding: 48px; display: grid; gap: 10px; align-content: center; }
.ticket__line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 0 20px;
  background: var(--red-step);
  text-decoration: none;
  font-weight: 500;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.ticket__line:active { transform: scale(0.985); }
.ticket__line .ph { overflow-wrap: anywhere; text-align: right; }
.ticket__line--go { background: var(--ink); font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .ticket__line:hover { background: var(--red-deep); }
  .ticket__line--go:hover { background: #000; }
}

/* Footer: the sign, built large */
.foot { background: var(--ink); color: var(--paper); padding: 96px var(--m) 32px; }
.foot__mark { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: clamp(16px, 3vw, 48px); }
.foot__sign { width: clamp(120px, 24vw, 360px); aspect-ratio: 1; }
.foot__name {
  font: 800 clamp(4.5rem, 17vw, 17rem)/0.8 var(--display);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--yellow);
  white-space: nowrap;
}
.foot__cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; margin-top: 56px; font-size: var(--step-small); }
.foot__links { display: grid; gap: 8px; }
.foot__contact .ph { background: var(--slate); color: var(--paper); }
.foot__last { display: flex; justify-content: space-between; align-items: center; margin-top: 64px; font-size: var(--step-small); }
.foot .btn--small { --btn-bg: var(--yellow); --btn-fg: var(--ink); }
@media (hover: hover) and (pointer: fine) { .foot .btn--small:hover { --btn-bg: var(--paper); } }

/* ---------- Tablet and phone: the inset panel stacks ---------- */
@media (max-width: 1000px) {
  .hero { align-items: start; padding: 15svh var(--m) 76vw; }
  .hero__sign { width: 100vw; height: 100vw; left: 50%; top: auto; bottom: -30vw; translate: -50% 0; }
  .hero__text { max-width: 640px; }
  .place { padding-inline: 10px; }
  .place__panel { display: flex; flex-direction: column; padding: 40px clamp(22px, 4vw, 48px) 0; gap: 40px; min-height: 0; }
  .place__blocks { margin-left: 0; max-width: 56ch; }
  .place__pic { position: relative; left: auto; bottom: auto; width: min(86vw, 640px); align-self: center; margin-bottom: calc(min(86vw, 640px) * -0.22); }
  .visit__inner { grid-template-columns: 1fr; }
}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  .nav__list { display: none; }
  .nav__small { display: block; position: relative; }
  .nav__small summary {
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 4px;
  }
  .nav__small summary::-webkit-details-marker { display: none; }
  .nav__small ul {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 220px;
    background: var(--ink);
    color: var(--paper);
    padding: 8px 0;
    transform-origin: top right;
    animation: pop 180ms var(--ease-out);
  }
  .nav__small a { display: block; padding: 12px 20px; text-decoration: none; }

  .hero { align-items: start; padding: 15svh var(--m) 98vw; min-height: 100svh; }
  .hero__sign { width: 130vw; height: 130vw; left: 50%; top: auto; bottom: -40vw; translate: -50% 0; }
  .hero__text { max-width: none; }
  .hero__title { font-size: 19vw; }
  .hero__lead { margin-top: 28px; font-size: var(--step-body); }

  .menu__head { grid-template-columns: 1fr; }
  .menu__pic { width: 56vw; justify-self: end; margin-top: -8px; }
  .menu__items { grid-template-columns: 1fr; }
  .menu__cat .h3 { font-size: 8.5vw; }


  .tiles { grid-template-columns: 1fr 1fr; column-gap: 6px; row-gap: 6px; }
  .tiles__heading { grid-column: 1 / 3; grid-row: 1; min-height: 0; padding-bottom: 16px; }
  .tile--a { grid-column: 1 / 3; grid-row: 2; height: auto; min-height: 56vw; }
  .tile--b { grid-column: 1; grid-row: 3; height: auto; min-height: 52vw; }
  .tile--c { grid-column: 2; grid-row: 3; margin-top: 32px; height: auto; min-height: 44vw; }
  .tile { padding: 20px; clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%); }
  .tile--b .tile__fig, .tile--c .tile__fig { font-size: var(--step-sub); }
  .tile__cap { font-size: var(--step-small); }
  .week { grid-template-columns: 1fr; margin-top: 48px; }

  .visit__map { aspect-ratio: 1; clip-path: polygon(0 0, calc(100% - 48px) 0, 100% 48px, 100% 100%, 48px 100%, 0 calc(100% - 48px)); }

  .ticket {
    margin-inline: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto 10px auto;
  }
  .ticket__stub { padding: 32px 24px; }
  .ticket__perf {
    padding: 0 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10'%3E%3Ccircle cx='7' cy='5' r='2.5' fill='%23E8C84A'/%3E%3C/svg%3E");
    background-size: 14px 10px;
    background-repeat: repeat-x;
  }
  .ticket__perf::before, .ticket__perf::after { top: 50%; bottom: auto; translate: 0 -50%; }
  .ticket__perf::before { left: calc(var(--notch) * -1); }
  .ticket__perf::after { left: auto; right: calc(var(--notch) * -1); }
  .ticket__lines { padding: 32px 24px; }
  .ticket__line { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 10px 16px; }
  .ticket__line .ph { text-align: left; }

  .foot { padding-top: 64px; }
  .foot__mark { grid-template-columns: 1fr; }
  .foot__sign { width: 40vw; }
  .foot__name { font-size: 26vw; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .foot__links { grid-row: span 2; }
}
@keyframes pop { from { opacity: 0; transform: scale(0.96); } }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Load: the sign slides in from the right, the name rises line by line */
  .js .hero__sign { animation: sign-in 1300ms var(--ease-expo) both; }
  .js .hero__star { transform-box: fill-box; transform-origin: center; animation: star-in 900ms var(--ease-out) 650ms both; }
  .js .hero__title .line > span { animation: rise 900ms var(--ease-expo) both; }
  .js .hero__title .line:nth-child(2) > span { animation-delay: 90ms; }
  .js [data-load] { animation: fade-up 700ms var(--ease-out) both; }
  .js .hero__lead[data-load] { animation-delay: 300ms; }
  .js .status[data-load] { animation-delay: 380ms; }
  .js .hero__actions[data-load] { animation-delay: 460ms; }
  .js .bar { animation: fade 600ms ease 200ms both; }

  /* Scroll: parts arrive in reading order, once */
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-expo); transition-delay: var(--d, 0ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-reveal-list] > * , .js [data-reveal-list] .item { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-expo); transition-delay: var(--d, 0ms); }
  .js [data-reveal-list].is-in > *, .js [data-reveal-list].is-in .item { opacity: 1; transform: none; }
  .js [data-reveal-list] > ul { opacity: 1; transform: none; }

  /* Signature: the drawing of the pub opens like a shutter */
  .js .shutter { clip-path: polygon(50% 100%, 50% 100%, 50% 100%, 50% 100%); transition: clip-path 1100ms var(--ease-in-out); }
  .js .shutter.is-in { clip-path: var(--diamond); }
  .js .shutter img { scale: 1.12; transition: scale 1500ms var(--ease-soft); }
  .js .shutter.is-in img { scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .place__pic img { animation: none; }
}
@keyframes sign-in { from { opacity: 0; transform: translateX(14%) rotate(6deg); } }
@keyframes star-in { from { opacity: 0; transform: scale(0.6); } }
@keyframes rise { from { transform: translateY(105%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } }
@keyframes fade { from { opacity: 0; } }