@font-face {
  font-family: 'Bevan';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Bevan_latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bevan';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Bevan_latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================
   0. FONTS — self-hosted.
   No third-party origin: the demo pulled Google Fonts from
   fonts.googleapis.com and fonts.gstatic.com, which in the EU means a
   visitor's IP reaches Google before they have consented to anything.
   latin-ext is kept, not dropped: Slovenian needs s-caron, c-caron and
   z-caron, and subsetting them away silently breaks 'tetoviranje',
   'zacetek' and every surname in the city.
   ============================================================ */
/* latin-ext */
/* latin */
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(fonts/92zatBhPNqw73ord4iYl.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(fonts/92zatBhPNqw73oTd4g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
Tested up to: 7.1
License: Proprietary
Text Domain: viplounge
*/

/* ============================================================
   1. DESIGN TOKENS — "Lounge"

   The name is the brief. A VIP lounge is not a tattoo shop: it is a warm,
   low-lit private room where the materials are leather, brass, marble and
   dark wood, and the light is golden and layered rather than overhead and
   white. Every tattoo studio in Ljubljana is cold black with a red accent,
   so this one is warm tobacco with brass — which is also what separates a
   members' room from a waiting room.

   Colour still carries meaning rather than decorating:
     --vip-stencil  brass — everything provisional: browse, plan, ask
     --vip-flash    oxblood leather — the one irreversible act: booking

   The ground is tobacco black, not neutral near-black. Pure #000 would
   crush a tattoo photograph, and the portfolio is the product — the shell
   exists to disappear behind it.
   ============================================================ */
:root {
  --vip-ground:      #14100B;   /* tobacco black */
  --vip-surface:     #1E1811;
  --vip-surface-2:   #282017;
  --vip-rule:        #3A2F22;
  --vip-rule-soft:   #2A2219;

  --vip-skin:        #F2EADC;   /* warm marble */
  --vip-skin-2:      #C0B098;
  --vip-muted:       #8F8168;

  --vip-stencil:     #B08A4A;   /* brass */
  --vip-stencil-hi:  #D8B87C;   /* polished brass */
  --vip-flash:       #7C2E27;   /* oxblood leather */
  --vip-flash-hi:    #9A3A31;

  /* Bevan is a Clarendon — the slab that old-school flash sheets, circus bills
     and western show cards were lettered in, and still the letterform the
     traditional tattoo world reads as its own. Jost is a geometric in the
     Futura line: the lettering of the 1930s club the phrase "VIP lounge"
     comes from. Traditional above, lounge below. */
  --vip-display: Bevan, "Clarendon", Rockwell, Georgia, serif;
  --vip-body:    Jost, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --vip-gap: clamp(1.25rem, 4vw, 2.5rem);
  --vip-measure: 66ch;
  --vip-ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   2. RESET AND BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--vip-ground);
  color: var(--vip-skin);
  font-family: var(--vip-body);
  font-size: 1.0125rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--vip-stencil-hi); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--vip-skin); }

h1, h2, h3 { font-family: var(--vip-display); font-weight: 400; line-height: 1.12; margin: 0 0 .6em; }
h1 { font-size: clamp(1.95rem, 1.45rem + 2.3vw, 3.5rem); letter-spacing: -.005em; }
h2 { font-size: clamp(1.45rem, 1.2rem + 1.05vw, 2.1rem); }
h3 { font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); }

:focus-visible { outline: 2px solid var(--vip-stencil-hi); outline-offset: 3px; }

.vip-vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--vip-stencil); color: var(--vip-ground); padding: .8rem 1.2rem;
}
.skip-link:focus { left: 0; }

/* ============================================================
   3. LAYOUT
   ============================================================ */
.vip-wrap { width: min(1240px, 100% - 2 * var(--vip-gap)); margin-inline: auto; }
.vip-section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.vip-prose { max-width: var(--vip-measure); }
.vip-prose p, .vip-prose li { color: var(--vip-skin-2); }
.vip-prose strong { color: var(--vip-skin); }

.vip-lede { font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); color: var(--vip-skin-2); max-width: 58ch; }

/* ============================================================
   4. BUTTONS
   ============================================================ */
.vip-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: 0 1.6rem;
  font-family: var(--vip-body); font-size: .92rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  background: var(--vip-stencil); color: var(--vip-ground); border: 1px solid var(--vip-stencil);
  border-radius: 2px; cursor: pointer;
  transition: background-color .22s var(--vip-ease), border-color .22s var(--vip-ease), color .22s var(--vip-ease);
}
.vip-btn:hover, .vip-btn:focus-visible { background: var(--vip-stencil-hi); border-color: var(--vip-stencil-hi); color: var(--vip-ground); }
.vip-btn--ghost { background: transparent; color: var(--vip-skin); border-color: var(--vip-rule); }
.vip-btn--ghost:hover, .vip-btn--ghost:focus-visible { background: transparent; border-color: var(--vip-stencil-hi); color: var(--vip-stencil-hi); }
.vip-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
@media (prefers-reduced-motion: reduce) { .vip-btn { transition: none; } }

/* ============================================================
   5. EDITORIAL TODO
   Deliberately off-palette terracotta with a label, so a note meant for the
   owner can never be mistaken for a design element. Same pattern as
   dior.si's .dior-todo, which was once accidentally recoloured into the
   brand gold and started reading as decoration.
   ============================================================ */
.vip-todo {
  border: 1px solid #7A4A2E; background: #1E1410; border-radius: 3px;
  padding: 1.1rem 1.3rem; margin: 1.5rem 0; max-width: var(--vip-measure);
}
.vip-todo__label {
  font-family: var(--vip-body); font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: #E08A57; margin: 0 0 .5rem;
}
.vip-todo p, .vip-todo li { color: #D8C9BE; margin: .3rem 0; }
.vip-todo ul { margin: .4rem 0 0; padding-left: 1.1rem; }

/* ============================================================
   6. HEADER
   ============================================================ */
.vip-hd {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,11,12,.82); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--vip-rule-soft);
}
.vip-hd__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; }
.vip-brand { display: inline-flex; align-items: baseline; gap: .5rem; text-decoration: none; color: var(--vip-skin); }
.vip-brand b { font-family: var(--vip-display); font-size: .98rem; font-weight: 400; letter-spacing: .01em; color: var(--vip-stencil-hi); }
/* The whole name is lit, like the sign over the door. */
.vip-brand b i { font-style: normal; color: inherit; }
.vip-brand span { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--vip-skin); }

/* The sign over the door. "VIP Lounge" is lit like the neon on a lounge
   front: a slow warm breath with the odd bad-contact flicker, the way a tube
   that has been on since the sixties behaves. It is the only decorative
   motion on the site, it is the brand mark, and it never moves position — so
   it cannot shift layout or pull attention off the booking button.
   Anyone who has asked their system not to animate gets the lit state. */
.vip-brand b {
  text-shadow:
    0 0 4px rgba(216,184,124,.5),
    0 0 14px rgba(216,184,124,.32),
    0 0 30px rgba(176,138,74,.2);
  animation: vip-neon 7.5s var(--vip-ease) infinite;
  will-change: opacity;
}
@keyframes vip-neon {
  0%, 32%   { opacity: 1; }
  35%       { opacity: .42; }
  36.5%     { opacity: 1; }
  38%       { opacity: .30; }
  39.5%     { opacity: 1; }
  62%       { opacity: 1; }
  64%       { opacity: .55; }
  65%       { opacity: 1; }
  82%       { opacity: .86; }
  100%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .vip-brand b { animation: none; opacity: 1; }
}
.vip-nav { display: flex; align-items: center; gap: .2rem; }
.vip-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .75rem;
  font-size: .84rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--vip-skin-2); text-decoration: none; transition: color .18s var(--vip-ease);
}
.vip-nav a:hover, .vip-nav a[aria-current="page"] { color: var(--vip-stencil-hi); }
.vip-hd .vip-btn { padding: 0 1.1rem; min-height: 42px; font-size: .8rem; }
.vip-burger { display: none; background: none; border: 0; color: var(--vip-skin); padding: .6rem; cursor: pointer; min-height: 44px; min-width: 44px; }
@media (max-width: 62rem) {
  .vip-burger { display: inline-flex; align-items: center; justify-content: center; }
  .vip-nav {
    position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch;
    background: var(--vip-surface); border-bottom: 1px solid var(--vip-rule);
    padding: .5rem var(--vip-gap) 1.5rem; gap: 0; display: none;
  }
  .vip-nav[data-open="true"] { display: flex; }
  .vip-nav a { min-height: 52px; border-bottom: 1px solid var(--vip-rule-soft); }
}

/* ============================================================
   7. HERO
   ============================================================ */
/* The hero photograph carries no scrim: the type sits beside it, not on it,
   so darkening the picture would only mute the work it is there to show. */
.vip-hero__in { position: relative; padding-block: clamp(3rem, 10vw, 6rem); }
.vip-hero .vip-lede { max-width: 46ch; color: var(--vip-skin); }

/* ============================================================
   8. GRIDS AND CARDS
   ============================================================ */
.vip-grid { display: grid; gap: 1px; background: var(--vip-rule-soft); border: 1px solid var(--vip-rule-soft); }
.vip-grid--3 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.vip-grid--2 { grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); }
.vip-card { background: var(--vip-ground); padding: 1.7rem 1.6rem; }
.vip-card h3 { margin-bottom: .5rem; color: var(--vip-skin); }
.vip-card p { margin: 0; color: var(--vip-skin-2); font-size: .96rem; }

/* ============================================================
   9. GALLERY
   ============================================================ */
.vip-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; list-style: none; margin: 2rem 0 0; padding: 0; }
.vip-gal li { margin: 0; }
.vip-gal a, .vip-gal figure { display: block; position: relative; aspect-ratio: 1/1; overflow: hidden; margin: 0; background: var(--vip-surface); }
.vip-gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--vip-ease), opacity .3s; }
.vip-gal a:hover img, .vip-gal a:focus-visible img { transform: scale(1.05); opacity: .86; }
@media (prefers-reduced-motion: reduce) { .vip-gal img { transition: none; } .vip-gal a:hover img { transform: none; } }

/* ============================================================
   10. PRICING
   ============================================================ */
.vip-price { border: 1px solid var(--vip-rule-soft); margin-top: 2rem; }
.vip-price__row { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: baseline; justify-content: space-between; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--vip-rule-soft); }
.vip-price__row:last-child { border-bottom: 0; }
.vip-price__row b { font-family: var(--vip-display); font-size: 1.15rem; font-weight: 500; color: var(--vip-skin); }
.vip-price__row span { color: var(--vip-skin-2); font-size: .95rem; flex: 1 1 22ch; }
/* Figures stay ink, not accent: colouring the number makes it the focal point
   of the row and reads as "this is expensive". The service name is what a
   customer is choosing between. Same decision as dior.si's Cenik. */
.vip-price__row em { font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--vip-skin); font-weight: 600; }

/* ============================================================
   11. FAQ — <details>, so it works with scripting off and keeps the
   headings in the outline for the FAQPage schema.
   ============================================================ */
.vip-faq { margin-top: 2rem; border-top: 1px solid var(--vip-rule-soft); max-width: var(--vip-measure); }
.vip-faq details { border-bottom: 1px solid var(--vip-rule-soft); }
.vip-faq summary { list-style: none; cursor: pointer; padding: 1.1rem 2.5rem 1.1rem 0; position: relative; }
.vip-faq summary::-webkit-details-marker { display: none; }
.vip-faq summary h3 { margin: 0; font-size: 1.12rem; color: var(--vip-skin); }
.vip-faq summary::after, .vip-faq summary::before {
  content: ""; position: absolute; right: .4rem; top: 50%; background: var(--vip-stencil-hi);
  transition: transform .24s var(--vip-ease);
}
.vip-faq summary::after { width: 14px; height: 2px; margin-top: -1px; }
.vip-faq summary::before { width: 2px; height: 14px; margin-top: -7px; right: 1rem; }
.vip-faq details[open] summary::before { transform: rotate(90deg); opacity: 0; }
.vip-faq__a { padding: 0 0 1.3rem; color: var(--vip-skin-2); }
.vip-faq__a p:first-child { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .vip-faq summary::after, .vip-faq summary::before { transition: none; } }

/* ============================================================
   12. FOOTER
   ============================================================ */
.vip-ft { border-top: 1px solid var(--vip-rule-soft); background: var(--vip-surface); padding-block: clamp(2.5rem, 6vw, 4rem); margin-top: clamp(3rem, 8vw, 6rem); }
.vip-ft__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2rem; }
.vip-ft h3 { font-family: var(--vip-body); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--vip-muted); margin-bottom: .9rem; }
.vip-ft a { color: var(--vip-skin-2); text-decoration: none; }
.vip-ft a:hover { color: var(--vip-stencil-hi); }
.vip-ft ul { list-style: none; margin: 0; padding: 0; }
.vip-ft li { padding: .28rem 0; }
.vip-ft address { font-style: normal; line-height: 1.8; color: var(--vip-skin-2); }
.vip-ft__legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--vip-rule-soft); display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.25rem; font-size: .86rem; color: var(--vip-muted); }

/* ============================================================
   13. HERO RULE — the one moment of motion
   ============================================================ */
.vip-hero h1 { margin-top: 0; }

/* ============================================================
   14. SPLIT + STEPS
   The steps ARE a sequence — consultation, sketch, appointment, tattoo,
   aftercare — so they are numbered. Numbering anything that is not a
   sequence is decoration pretending to be structure.
   ============================================================ */
.vip-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.vip-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; border-top: 1px solid var(--vip-rule-soft); }
.vip-steps li { counter-increment: s; display: grid; grid-template-columns: 2.5rem 1fr; gap: .2rem 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--vip-rule-soft); }
.vip-steps li::before { content: counter(s, decimal-leading-zero); grid-row: 1 / span 2; font-family: var(--vip-display); font-size: 1.4rem; color: var(--vip-stencil); line-height: 1; padding-top: .15rem; }
.vip-steps b { font-family: var(--vip-display); font-size: 1.2rem; font-weight: 400; color: var(--vip-skin); }
.vip-steps span { color: var(--vip-skin-2); font-size: .95rem; }

/* ============================================================
   15. REACH + ARTIST + CLOSING
   ============================================================ */
.vip-reach { background: var(--vip-surface); border-block: 1px solid var(--vip-rule-soft); }
.vip-reach em { font-style: italic; color: var(--vip-skin); }
.vip-artist { background: var(--vip-surface); border-block: 1px solid var(--vip-rule-soft); }
.vip-artist__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.vip-closing { text-align: left; }
.vip-closing h2 { max-width: 18ch; }

/* Flash-sheet rhythm: one tile in seven breaks the grid. */
.vip-gal__big { grid-column: span 2; grid-row: span 2; }
@media (max-width: 34rem) { .vip-gal { grid-template-columns: repeat(2, 1fr); } .vip-gal__big { grid-column: span 2; grid-row: span 1; } }

/* Booking is the only place flash red appears. Everything else on the site is
   provisional and wears stencil violet. */
.vip-btn--book { background: var(--vip-flash); border-color: var(--vip-flash); }
.vip-btn--book:hover, .vip-btn--book:focus-visible { background: var(--vip-flash-hi); border-color: var(--vip-flash-hi); }

/* ============================================================
   16. HERO — editorial split
   The default for this vertical is a full-bleed photograph behind a dark
   scrim with centred type. That treatment flattens tattoo work into mud,
   which on a studio site destroys the only thing a visitor came to see.
   Here the photograph keeps its own contrast as a block, and the headline
   owns the dark ground beside it and crosses the boundary.
   ============================================================ */
.vip-hero {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--vip-rule-soft);
  display: grid; align-items: end;
  min-height: min(84vh, 790px);
}

/* Edge to edge, behind everything. */
.vip-hero__bg { position: absolute; inset: 0; z-index: 0; }
.vip-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 44% 46%; }

/* The one piece of motion on the page: a single stroke drawn under the last
   word, once, then it stops. stroke-dashoffset is what makes a pen
   out of a path — the whole line is one long dash, held off the start, then
   walked back to zero. */
/* The block is only as wide as the longest word, so the stroke can sit hard
   against the words rather than against the column. */
/* The stroke runs from directly under the header down to the last word, so it
   is anchored to the top of the hero's padding rather than to the heading.
   The SVG is wrapped in a span on purpose: an absolutely positioned REPLACED
   element with top and bottom both set still takes its height from its
   intrinsic aspect ratio, so the stroke overshot the words. A plain span has
   no intrinsic ratio, so the browser solves its height from top/bottom, and
   the SVG then fills it. */
.vip-hero__head {
  position: relative; width: max-content; max-width: 100%;
  padding-left: clamp(1.15rem, 2vw, 1.7rem); margin-bottom: 1.5rem;
}
.vip-hero__rule {
  position: absolute; left: 0; top: calc(-1 * var(--vip-hero-top)); bottom: .1em;
  width: .5rem; display: block;
}
.vip-hero__rule svg { width: 100%; height: 100%; display: block; }
.vip-draw {
  /* Measured: the curve is 416.46 user units long. Do NOT switch these to a
     normalised pathLength="1" — Chrome scales stroke-dasharray by pathLength
     but not stroke-dashoffset, so the offset stays at 1px and the line is
     drawn from the very first frame. Verified in the browser. The curve here
     measures 402.05 units. */
  stroke-dasharray: 405;
  stroke-dashoffset: 405;
  /* The delay is not decoration: at .35s the stroke was finishing while the
     hero image and the webfont were still swapping in, so it completed before
     the page looked settled and read as 'already there'. It now starts after
     first paint has calmed down. */
  animation: vip-draw 6.8s cubic-bezier(.28,.06,.4,.98) .9s forwards;
}
@keyframes vip-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .vip-draw { animation: none; stroke-dashoffset: 0; }
}

/* Two scrims, each doing one job. The first is a horizontal wash that makes
   the left column readable without touching the hands and the machine on the
   right; the second seats the photograph on the tobacco ground so the section
   below does not begin with a hard seam. Display type needs 3:1, not 4.5:1,
   which is why the wash can stay this light over the picture. */
.vip-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(97deg,
      rgba(20,16,11,.95) 0%, rgba(20,16,11,.90) 30%,
      rgba(20,16,11,.62) 52%, rgba(20,16,11,.30) 74%, rgba(20,16,11,.22) 100%),
    linear-gradient(180deg,
      rgba(20,16,11,.55) 0%, rgba(20,16,11,0) 28%,
      rgba(20,16,11,0) 62%, rgba(20,16,11,.88) 100%);
}

.vip-hero__in {
  position: relative; z-index: 2;
  width: min(1240px, 100% - 2 * var(--vip-gap)); margin-inline: auto;
  --vip-hero-top: clamp(4.5rem, 13vw, 8rem);
  padding-block: var(--vip-hero-top) clamp(2rem, 4vw, 3rem);
}

/* The motto is three words and they are the whole argument, so they are set
   one per line. "Slow. Precise. Once." is a claim about restraint, so the
   type is restrained to match it: flush left, exact, tight, given room, and
   no accent colour on any one word — breaking the alignment to make a point
   would contradict the sentence. Bevan is a Clarendon, so it is already
   emphatic; it needs space, not weight. */
.vip-hero h1 {
  margin: 0;
  display: grid;
  line-height: .96;
  letter-spacing: -.005em;
  font-size: clamp(1.72rem, 3.5vw, 2.8rem);
  max-width: 14ch;
}
.vip-hero h1 span { display: block; }

.vip-hero .vip-lede { max-width: 38ch; color: var(--vip-skin); }
.vip-hero .vip-cta { margin-bottom: clamp(2.5rem, 7vw, 4.5rem); }

.vip-hero__meta {
  display: flex; flex-wrap: wrap; gap: 0; list-style: none;
  margin: 0; padding: 0; border-top: 1px solid rgba(216,184,124,.28);
}
.vip-hero__meta li { padding: 1rem 2.2rem 0 0; }
.vip-hero__meta b { display: block; font-family: var(--vip-display); font-size: 1.02rem; font-weight: 400; color: var(--vip-skin); }
.vip-hero__meta span { font-size: .82rem; letter-spacing: .04em; color: var(--vip-skin-2); }

@media (max-width: 60rem) {
  .vip-hero { min-height: 0; }
  .vip-hero__bg img { object-position: 60% 40%; }
  /* On a phone the horizontal wash has nowhere to go, so the type sits on a
     vertical one instead. */
  .vip-hero__bg::after {
    background: linear-gradient(180deg,
      rgba(20,16,11,.72) 0%, rgba(20,16,11,.80) 45%, rgba(20,16,11,.95) 100%);
  }
  .vip-hero__in { padding-block: clamp(3rem, 12vw, 5rem) 2rem; }
}