/* lalabloom london: shared styles for the inner pages */
:root {
  --bg: #ffffff;
  --ink: #372315;
  --quiet: #8b7462;
  --line: rgba(55, 35, 21, 0.12);
  --soft: #f7f3ee;
  --bloom: #b8325a;
  --gutter: 5vw;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color: var(--ink); }
body { font-family: 'Noto Sans SC', system-ui, sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.serif { font-family: 'Cormorant Garamond', serif; }
.sc { font-family: 'Cormorant SC', serif; letter-spacing: 0.24em; text-transform: lowercase; }

/* masthead */
.masthead { display: flex; justify-content: space-between; align-items: center; padding: 22px var(--gutter); }
.masthead .logo { height: 64px; aspect-ratio: 4353 / 1093; background-color: var(--ink); -webkit-mask: url(wordmark-london.svg) center / contain no-repeat; mask: url(wordmark-london.svg) center / contain no-repeat; }
.masthead nav { display: flex; gap: 38px; font-size: 15px; }
.masthead nav a { opacity: .75; transition: opacity .2s; }
.masthead nav a:hover, .masthead nav a[aria-current] { opacity: 1; }
.masthead nav a[aria-current] { border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.rule { height: 1px; background: var(--line); margin: 0 var(--gutter); }

/* footer: company details are a legal requirement for a UK company website */
.site-footer { margin-top: 120px; padding: 48px var(--gutter) 40px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; font-size: 13px; color: var(--quiet); }
.site-footer .mark { height: 40px; aspect-ratio: 4353 / 1093; background-color: var(--ink); -webkit-mask: url(wordmark-london.svg) left center / contain no-repeat; mask: url(wordmark-london.svg) left center / contain no-repeat; margin-bottom: 14px; }
.site-footer h4 { font-family: 'Cormorant SC', serif; font-weight: 500; font-size: 14px; letter-spacing: 0.22em; text-transform: lowercase; color: var(--ink); margin-bottom: 10px; }
.site-footer p { line-height: 1.8; }
.site-footer a { border-bottom: 1px solid var(--line); }
.legal-line { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--line); font-size: 12px; }

.preview-tag { position: fixed; right: 18px; bottom: 18px; z-index: 50; font-size: 11px; letter-spacing: .08em; background: var(--ink); color: #fff; padding: 6px 12px; border-radius: 999px; opacity: .8; }

@media (max-width: 760px) {
  :root { --gutter: 20px; }
  .masthead .logo { height: 40px; }
  .masthead nav { gap: 16px; font-size: 13px; letter-spacing: .12em; }
  .site-footer { grid-template-columns: 1fr; gap: 28px; margin-top: 80px; }
}
@media (max-width: 420px) {
  .masthead { flex-direction: column; align-items: flex-start; gap: 14px; }
}