/* Gác Nhỏ (quan-cafe 4.5): an attic café laid out like a print magazine. Ivory paper, espresso ink, mustard rules,
   masthead nameplate, serif columns, drop caps, round thumbnails. Fonts: Playfair Display (titles) + Lora (text). */
:root {
  --ivory: #fbf6ec;
  --espresso: #3a2417;
  --mustard: #c08a22;
  --soft: #7b6553;
  --rule: rgba(58, 36, 23, 0.22);
  --k-font: 'Lora', Georgia, serif;
  --k-font-display: 'Playfair Display', Georgia, serif;
  --k-accent: #3a2417;
  --k-accent-ink: #fbf6ec;
  --k-paper: #fffbf3;
  --k-ink: #3a2417;
  --k-line: rgba(58, 36, 23, 0.28);
  --k-radius: 0px;
}

body {
  background: var(--ivory);
  color: var(--espresso);
  font:
    400 17px/1.65 'Lora',
    Georgia,
    serif;
}
a {
  color: inherit;
}
h1,
h2,
h3 {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
}

/* Masthead */
.mast {
  padding: 10px 16px 0;
  text-align: center;
}
.mast-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--espresso);
  font:
    400 12px/1.4 'Lora',
    serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mast-name {
  display: block;
  margin: 14px 0 2px;
  font:
    900 58px/0.95 'Playfair Display',
    serif;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.mast-tag {
  margin: 0 0 12px;
  font-style: italic;
  color: var(--soft);
}
.mast-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  border-top: 3px double var(--espresso);
  border-bottom: 1px solid var(--espresso);
}
.mast-nav a {
  padding: 10px 8px;
  font:
    600 13px/1.2 'Playfair Display',
    serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
}
.mast-nav a + a {
  border-left: 1px solid var(--rule);
}

.paper {
  padding: 0 16px;
}
.kicker {
  margin: 0 0 6px;
  font:
    600 12px/1.4 'Playfair Display',
    serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mustard);
}
.kicker a {
  text-decoration: none;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border: 1.5px solid var(--espresso);
  background: var(--espresso);
  color: var(--ivory);
  font:
    600 15px/1 'Playfair Display',
    serif;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
}
.btn-ghost {
  background: transparent;
  color: var(--espresso);
}
.btn-block {
  width: 100%;
}
.text-btn {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.center {
  margin: 22px 0 0;
  text-align: center;
}
.plain {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cover story */
.cover {
  display: grid;
  gap: 16px;
  padding: 22px 0 8px;
}
.cover-img {
  margin: 0;
}
.cover-img img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.cover-img figcaption {
  margin-top: 6px;
  font-size: 13px;
  font-style: italic;
  color: var(--soft);
}
.cover-title {
  font-size: 36px;
  line-height: 1.08;
}
.cover-lead {
  margin: 12px 0 18px;
  font-size: 19px;
  font-style: italic;
}

/* Blocks with centred rule titles */
.block {
  padding: 34px 0 6px;
}
.block-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  font:
    700 22px/1.2 'Playfair Display',
    serif;
  text-align: center;
}
.block-title::before,
.block-title::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--espresso);
  border-bottom: 1px solid var(--espresso);
  height: 3px;
}

/* Picks */
.picks {
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pick;
}
.pick {
  display: grid;
  grid-template-columns: 96px 1fr;
  column-gap: 16px;
  align-items: start;
  counter-increment: pick;
}
.pick-img {
  grid-row: 1 / span 3;
  position: relative;
}
.pick-img::after {
  content: counter(pick);
  position: absolute;
  top: -4px;
  left: -4px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--mustard);
  color: #fff;
  font:
    700 15px/1 'Playfair Display',
    serif;
}
.pick-img img,
.row-img img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}
.pick-name {
  font-size: 21px;
  line-height: 1.2;
}
.pick-name a,
.row-name a,
.story-title a {
  text-decoration: none;
}
.pick-short {
  margin: 4px 0;
  font-size: 15px;
  color: var(--soft);
}
.pick-buy {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-weight: 700;
}

/* Rows */
.rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.row-name {
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.row-short {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--soft);
}
.row-side {
  display: grid;
  justify-items: end;
  gap: 6px;
}
.row-price {
  font-weight: 700;
  white-space: nowrap;
}
.row-add {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--espresso);
  background: transparent;
  color: var(--espresso);
  font:
    600 13px/1 'Playfair Display',
    serif;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.row-add:hover {
  background: var(--espresso);
  color: var(--ivory);
}
.menu-cols {
  display: grid;
  gap: 18px 40px;
}
.menu-group-name {
  margin-bottom: 4px;
  font-size: 20px;
  font-style: italic;
  color: var(--mustard);
}
.menu-group-name a {
  text-decoration: none;
}

/* About */
.about-cols {
  display: grid;
  gap: 22px;
}
.dropcap p {
  margin: 0 0 14px;
}
.dropcap p:first-of-type::first-letter {
  float: left;
  margin: 6px 8px 0 0;
  font:
    900 64px/0.8 'Playfair Display',
    serif;
  color: var(--mustard);
}
.pull {
  margin: 0;
  padding: 18px 0;
  border-top: 3px double var(--espresso);
  border-bottom: 3px double var(--espresso);
  text-align: center;
}
.pull p {
  margin: 0 0 10px;
  font:
    italic 400 22px/1.4 'Playfair Display',
    serif;
}
.pull cite {
  font-size: 14px;
  font-style: normal;
  color: var(--soft);
}

/* Stories */
.stories {
  display: grid;
  gap: 26px;
}
.story-img img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: sepia(0.15);
}
.story .kicker {
  margin-top: 10px;
}
.story-title {
  font-size: 22px;
  line-height: 1.2;
}
.story-excerpt {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--soft);
}

/* Letters */
.letters {
  display: grid;
  gap: 16px;
}
.letter {
  margin: 0;
  padding: 16px 18px;
  background: #f4ebda;
  border-left: 3px solid var(--mustard);
}
.letter blockquote {
  margin: 0 0 8px;
  font-style: italic;
}
.letter-stars {
  margin: 0 0 6px;
  color: var(--mustard);
  letter-spacing: 0.1em;
}
.letter figcaption {
  font-size: 14px;
  font-weight: 700;
}

/* FAQ */
.faq {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  padding: 14px 28px 14px 0;
  position: relative;
  font:
    700 17px/1.4 'Playfair Display',
    serif;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 12px;
  font-size: 22px;
  color: var(--mustard);
}
.faq[open] summary::after {
  content: '–';
}
.faq p {
  margin: 0 0 14px;
  color: var(--soft);
}

/* Visit */
.visit-cols {
  display: grid;
  gap: 20px;
}
.visit-address {
  margin: 0 0 10px;
  font:
    700 20px/1.35 'Playfair Display',
    serif;
}
.hours li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dotted var(--rule);
}
.visit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 0;
}
.map {
  min-height: 260px;
  border: 1px solid var(--espresso);
  filter: sepia(0.25);
}

/* Inner pages */
.page-title {
  margin: 26px 0 6px;
  font-size: 40px;
  line-height: 1.05;
  text-align: center;
}
.page-lead {
  margin: 0 0 22px;
  font-style: italic;
  text-align: center;
  color: var(--soft);
}
.finder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-bottom: 10px;
}
.finder-search {
  min-width: 0;
  min-height: 46px;
  padding: 0 4px;
  border: 0;
  border-bottom: 2px solid var(--espresso);
  background: transparent;
  color: var(--espresso);
  font:
    italic 400 18px/1.2 'Lora',
    serif;
  outline: none;
}
.finder-select {
  max-width: 150px;
  min-height: 46px;
  border: 1px solid var(--rule);
  background: var(--ivory);
  color: var(--espresso);
  font:
    400 14px/1 'Lora',
    serif;
}
.tabs {
  display: flex;
  gap: 4px 16px;
  margin-bottom: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--espresso);
}
.tabs-list {
  display: contents;
}
.tab {
  flex: none;
  padding: 10px 0;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--soft);
  font:
    600 14px/1.2 'Playfair Display',
    serif;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
}
.tab[aria-pressed='true'] {
  border-color: var(--mustard);
  color: var(--espresso);
}
.empty {
  padding: 24px 0;
  font-style: italic;
  color: var(--soft);
}

/* Detail */
.feature {
  padding-top: 22px;
}
.feature-title {
  font-size: 44px;
  line-height: 1.02;
}
.feature-short {
  margin: 10px 0 16px;
  font-size: 19px;
  font-style: italic;
  color: var(--soft);
}
.feature-img {
  margin: 0 0 20px;
}
.feature-img img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.feature-cols {
  display: grid;
  gap: 24px;
}
.order-box {
  padding: 18px;
  border: 1px solid var(--espresso);
  background: #fffbf3;
}
.order-price {
  margin: 0 0 10px;
  font:
    700 28px/1.1 'Playfair Display',
    serif;
}
.order-price small {
  font-size: 15px;
  font-weight: 400;
  color: var(--soft);
}
.specs {
  margin: 0 0 16px;
  font-size: 15px;
}
.specs div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dotted var(--rule);
}
.specs dt {
  color: var(--soft);
}
.specs dd {
  margin: 0;
  text-align: right;
  font-weight: 700;
}
.small-link {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  text-align: center;
}

/* Order */
.order-cols {
  display: grid;
  gap: 18px;
}
.qty {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 0;
}
.qty button:not(.text-btn) {
  width: 30px;
  height: 30px;
  border: 1px solid var(--espresso);
  border-radius: 50%;
  background: none;
  color: var(--espresso);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.qty .text-btn {
  font-size: 14px;
  color: var(--soft);
}
.total-line {
  display: flex;
  justify-content: space-between;
  margin: 14px 0;
  font:
    700 24px/1 'Playfair Display',
    serif;
}

/* Article */
.read {
  max-width: 720px;
  margin: 0 auto;
  padding-top: 22px;
}
.read-title {
  font-size: 38px;
  line-height: 1.08;
}
.read-lead {
  margin: 12px 0 18px;
  font-size: 20px;
  font-style: italic;
  color: var(--soft);
}
.read-body {
  font-size: 18px;
  line-height: 1.75;
}
.more-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.more-list a {
  font:
    700 18px/1.3 'Playfair Display',
    serif;
  text-decoration: none;
}
.more-list .kicker {
  display: block;
  margin: 4px 0 0;
}

/* Footer */
.foot {
  margin-top: 48px;
  padding: 26px 16px 8px;
  border-top: 3px double var(--espresso);
  text-align: center;
}
.foot-name {
  margin: 0 0 14px;
  font:
    900 36px/1 'Playfair Display',
    serif;
}
.foot-cols {
  display: grid;
  gap: 14px;
  font-size: 15px;
}
.foot-cols p {
  margin: 0;
}

@media (min-width: 820px) {
  .mast {
    padding: 14px 40px 0;
  }
  .mast-name {
    font-size: 104px;
  }
  .mast-nav a {
    padding: 10px 16px;
    font-size: 14px;
    letter-spacing: 0.08em;
  }
  .paper {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 40px;
  }
  .cover {
    grid-template-columns: 1.5fr 1fr;
    gap: 36px;
    align-items: center;
    padding-top: 34px;
  }
  .cover-title {
    font-size: 52px;
  }
  .picks {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .pick {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .pick-img {
    grid-row: auto;
    width: 180px;
    margin: 0 auto 12px;
  }
  .pick-buy {
    justify-content: center;
  }
  .menu-cols {
    grid-template-columns: 1fr 1fr;
  }
  .about-cols {
    grid-template-columns: 1.6fr 1fr;
    gap: 48px;
    align-items: center;
  }
  .dropcap {
    columns: 2;
    column-gap: 32px;
  }
  .read-body.dropcap {
    columns: 1;
  }
  .stories {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .stories-all > .story:first-of-type {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    column-gap: 32px;
    align-items: center;
  }
  .stories-all > .story:first-of-type .story-img {
    grid-row: 1 / span 3;
  }
  .stories-all > .story:first-of-type .story-title {
    font-size: 34px;
  }
  .letters {
    grid-template-columns: repeat(2, 1fr);
  }
  .faqs {
    max-width: 780px;
    margin: 0 auto;
  }
  .visit-cols {
    grid-template-columns: 1fr 1.4fr;
    gap: 40px;
  }
  .map {
    min-height: 320px;
  }
  .page-title {
    font-size: 64px;
  }
  .finder {
    max-width: 680px;
    margin: 0 auto 14px;
  }
  .tabs {
    justify-content: center;
  }
  .rows-all {
    columns: 2;
    column-gap: 48px;
  }
  .rows-all .row {
    break-inside: avoid;
  }
  .feature {
    max-width: 1000px;
    margin: 0 auto;
  }
  .feature-title {
    font-size: 72px;
  }
  .feature-cols {
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
    align-items: start;
  }
  .order-cols {
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: start;
  }
  .read-title {
    font-size: 54px;
  }
  .foot-cols {
    max-width: 1000px;
    margin: 0 auto;
    grid-template-columns: repeat(3, 1fr);
  }
}