/* Self-hosted variable fonts — Playfair Display & Lora, SIL Open Font License 1.1.
   Latin + Latin-Ext only (Latin-Ext carries Polish ą ć ę ł ń ó ś ź ż).
   Self-hosted so the site has no third-party dependency and no render-blocking
   request to fonts.googleapis.com. */

@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/lora-italic-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: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/lora-italic-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;
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/lora-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: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/lora-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;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/playfair-display-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: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/playfair-display-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;
}

/* =========================================================================
   Bistro u Liski — design tokens
   Palette sampled from the business's own menu board and opening poster.
   ========================================================================= */

@layer reset, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { line-height: 1.6; -webkit-font-smoothing: antialiased; }
  img, picture, svg { display: block; max-inline-size: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  h1, h2, h3 { text-wrap: balance; line-height: 1.12; }
  p { text-wrap: pretty; }
}

@layer base {
  :root {
    /* --- colour roles (hex fallback, oklch override below) --- */
    --ground:      #17130f;   /* page ground: near-black, warm */
    --ground-2:    #201a14;   /* raised panel */
    --ground-3:    #2b231a;   /* hairline fills */
    --cream:       #f3e8d2;   /* primary text on dark */
    --cream-dim:   #c3b295;   /* secondary text */
    --gold:        #d9a845;   /* ornament, section marks, rules */
    --gold-deep:   #8a6a26;   /* rules at low emphasis */
    --fox:         #e2712a;   /* the fox's orange — sparing */
    --tomato:      #b3372c;   /* CTA ONLY */
    --tomato-lift: #c8412f;   /* CTA hover */
    --rule:        #40342572;

    --shadow-lift: 0 1px 0 #ffffff0f inset, 0 12px 28px -18px #000;

    /* --- type --- */
    --face-display: "Playfair Display", "Georgia", "Times New Roman", serif;
    --face-text:    "Lora", "Georgia", "Times New Roman", serif;

    --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
    --step-0:  clamp(1rem, 0.96rem + 0.20vw, 1.12rem);
    --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.45rem);
    --step-2:  clamp(1.50rem, 1.30rem + 1.00vw, 2.05rem);
    --step-3:  clamp(1.95rem, 1.55rem + 2.00vw, 3.10rem);
    --step-4:  clamp(2.45rem, 1.70rem + 3.60vw, 4.60rem);

    /* --- space --- */
    --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
    --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
    --sp-9: 6rem;

    --measure: 62ch;
    --shell: 72rem;
    --radius: 3px;
  }

  @supports (color: oklch(50% 0.1 60)) {
    :root {
      --ground:    oklch(16% 0.012 62);
      --ground-2:  oklch(21% 0.016 62);
      --ground-3:  oklch(26% 0.020 62);
      --cream:     oklch(93% 0.031 84);
      --cream-dim: oklch(77% 0.033 84);
      --gold:      oklch(76% 0.117 79);
      --gold-deep: oklch(52% 0.083 79);
      --fox:       oklch(66% 0.163 46);
      --tomato:    oklch(50% 0.166 28);
      --tomato-lift: oklch(56% 0.180 28);
    }
  }

  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  body {
    background: var(--ground);
    color: var(--cream);
    font-family: var(--face-text);
    font-size: var(--step-0);
    font-optical-sizing: auto;
  }

  a { color: var(--gold); text-underline-offset: 0.22em; }
  a:hover { color: var(--cream); }

  :focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 2px;
  }

  ::selection { background: var(--tomato); color: var(--cream); }
}

@layer layout {
  .shell {
    inline-size: min(100% - 2.5rem, var(--shell));
    margin-inline: auto;
  }
  @media (width < 30rem) { .shell { inline-size: min(100% - 1.75rem, var(--shell)); } }

  .section { padding-block: var(--sp-9); }
  .section--tight { padding-block: var(--sp-8); }
  /* pagehead already carries bottom padding — don't stack two large gaps */
  .pagehead + .section { padding-block-start: var(--sp-7); }

  .skip {
    position: absolute; inset-inline-start: -9999px;
    background: var(--cream); color: var(--ground);
    padding: var(--sp-3) var(--sp-4); z-index: 100;
  }
  .skip:focus { inset-inline-start: var(--sp-4); inset-block-start: var(--sp-4); }
}

@layer components {

  /* ---------- brand mark: cropped from the real menu board ---------- */
  /* The bistro's own fox, cropped out of its printed menu board and served as
     its own asset. The board's ground is rgb(29,23,17); the radial mask feathers
     the tile's edges so no rectangle shows against --ground at any size. */
  .mark {
    inline-size: 2.75rem; aspect-ratio: 206 / 144; flex: none;
    background-image: image-set(url("../img/logo-lisek-128.avif") type("image/avif"),
                                url("../img/logo-lisek-128.webp") type("image/webp"),
                                url("../img/logo-lisek-128.png") type("image/png"));
    background-size: cover; background-repeat: no-repeat;
    -webkit-mask-image: radial-gradient(ellipse 74% 76% at 50% 46%, #000 62%, transparent 100%);
            mask-image: radial-gradient(ellipse 74% 76% at 50% 46%, #000 62%, transparent 100%);
  }
  .mark--lg {
    inline-size: 8rem;
    background-image: image-set(url("../img/logo-lisek-256.avif") type("image/avif"),
                                url("../img/logo-lisek-256.webp") type("image/webp"),
                                url("../img/logo-lisek-256.png") type("image/png"));
  }

  /* ---------- header ---------- */
  .masthead {
    position: sticky; inset-block-start: 0; z-index: 20;
    background: color-mix(in oklab, var(--ground) 88%, transparent);
    border-block-end: 1px solid var(--rule);
  }
  @supports (backdrop-filter: blur(6px)) {
    .masthead { backdrop-filter: blur(8px) saturate(1.1); }
  }
  .masthead__inner {
    display: flex; align-items: center; gap: var(--sp-5);
    min-block-size: 4.25rem;
  }
  .brand {
    display: flex; align-items: center; gap: var(--sp-3);
    text-decoration: none; color: var(--cream); margin-inline-end: auto;
    min-block-size: 2.75rem; /* the mark alone is only 31px tall */
  }
  .brand__name {
    font-family: var(--face-display);
    font-size: var(--step-1); font-weight: 600;
    letter-spacing: 0.005em; line-height: 1;
  }
  .brand__where {
    display: block; font-size: 0.7rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--cream-dim); margin-block-start: 0.2rem;
  }

  .nav { display: flex; align-items: center; gap: var(--sp-5); }
  .nav a {
    color: var(--cream); text-decoration: none;
    font-size: var(--step--1); letter-spacing: 0.09em;
    text-transform: uppercase;
    padding-block: 0.9rem;
    border-block-end: 2px solid transparent;
    transition: border-color 160ms ease, color 160ms ease;
  }
  .nav a:hover, .nav a[aria-current="page"] { color: var(--gold); border-block-end-color: var(--gold); }
  @media (width < 52rem) { .nav { display: none; } }

  /* ---------- the call button: the one CTA on this site ---------- */
  .call {
    display: inline-flex; align-items: center; gap: var(--sp-3);
    min-block-size: 2.9rem; padding: 0.7rem 1.15rem;
    background: var(--tomato); color: var(--cream);
    text-decoration: none; border-radius: var(--radius);
    font-family: var(--face-text); font-weight: 600;
    letter-spacing: 0.02em;
    /* No nowrap here: at 375px the long label's min-content width would force
       the hero grid track wider than the shell and clip the whole column. */
    flex-wrap: wrap; justify-content: center; text-align: center;
    box-shadow: var(--shadow-lift);
    transition: background-color 160ms ease, transform 120ms ease;
  }
  .call:hover { background: var(--tomato-lift); color: var(--cream); }
  .call:active { transform: translateY(1px); }
  .call__icon { inline-size: 1.05em; block-size: 1.05em; fill: currentColor; flex: none; }
  .call--lg { font-size: var(--step-1); padding: 0.95rem 1.6rem; min-block-size: 3.4rem; }
  /* At 320px the brand + full number overflow the header. The sticky bottom bar
     still carries the number, so the header button becomes icon-only. */
  @media (width < 26rem) {
    .masthead .call { padding-inline: 0.85rem; }
    .masthead .call .call__num { display: none; }
    .brand__where { display: none; }
  }
  .call__num { font-variant-numeric: tabular-nums; white-space: nowrap; }

  /* ---------- hero ---------- */
  /* Explicit positive layering: photo 0, scrim 1, content 2.
     Negative z-index was fragile — the photo dropped out entirely in some
     rendering paths despite the isolation context. */
  .hero { position: relative; isolation: isolate; overflow: hidden; }
  .hero__media {
    position: absolute; inset: 0; z-index: 0;
    inline-size: 100%; block-size: 100%;
    object-fit: cover; object-position: 62% 55%;
  }
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    /* Dark enough under the copy for AA contrast, light enough on the right
       that the photograph is actually visible. Verified by sampling the
       composited pixels behind the headline and lead. */
    background:
      linear-gradient(100deg, #0d0a07ed 0%, #0d0a07de 52%, #0d0a076b 72%, #0d0a0714 92%),
      linear-gradient(to top, #0d0a07bf, transparent 45%);
  }
  .hero__inner {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: minmax(0, 1fr); align-content: center;
    min-block-size: min(84svh, 44rem);
    padding-block: var(--sp-9);
    max-inline-size: 40rem;
  }
  /* No trailing hairline rule here — a decorative line that organizes
     nothing is a generated-landing-page tell. The label stands alone. */
  .eyebrow {
    font-size: var(--step--1); letter-spacing: 0.19em;
    text-transform: uppercase; color: var(--gold);
    margin-block-end: var(--sp-4);
  }
  /* Over the photograph the mid-tone gold drops to 4.18:1. Text on an image
     needs more lightness than text on a flat dark ground. */
  .hero .eyebrow { color: oklch(86% 0.095 84); }
  .hero h1 {
    font-family: var(--face-display);
    font-size: var(--step-4); font-weight: 600;
    letter-spacing: -0.012em;
  }
  .hero__lead {
    margin-block-start: var(--sp-5);
    font-size: var(--step-1); color: var(--cream-dim);
    max-inline-size: 34ch;
  }
  .hero__actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
    margin-block-start: var(--sp-6);
  }
  .ghost {
    display: inline-flex; align-items: center; min-block-size: 2.9rem;
    padding: 0.7rem 1.1rem; border: 1px solid var(--gold-deep);
    color: var(--cream); text-decoration: none; border-radius: var(--radius);
    letter-spacing: 0.02em;
    transition: border-color 160ms ease, background-color 160ms ease;
  }
  .ghost:hover { border-color: var(--gold); background: #ffffff0a; color: var(--cream); }

  .hero__strip {
    list-style: none; padding: 0;
    display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
    padding-block: var(--sp-4); margin-block-start: var(--sp-7);
    border-block-start: 1px solid var(--rule);
    font-size: var(--step--1); color: var(--cream-dim);
  }
  .hero__strip b { color: var(--cream); font-weight: 600; }

  /* ---------- section heading ---------- */
  .head { margin-block-end: var(--sp-7); }
  .head__mark {
    font-size: var(--step--1); letter-spacing: 0.19em;
    text-transform: uppercase; color: var(--gold);
  }
  .head h2 {
    font-family: var(--face-display); font-size: var(--step-3);
    font-weight: 600; margin-block-start: var(--sp-3);
  }
  .head p {
    color: var(--cream-dim); margin-block-start: var(--sp-3);
    max-inline-size: var(--measure);
  }

  /* ---------- THE SIGNATURE: the price row ----------
     Taken directly from the bistro's own printed board, which already
     sets dish, dotted leader, price. ------------------------------- */
  .board { background: var(--ground-2); border-block: 1px solid var(--rule); }

  .card {
    border: 1px solid var(--rule); border-radius: var(--radius);
    padding: var(--sp-6) var(--sp-5);
    background: linear-gradient(180deg, #ffffff06, transparent 40%);
  }
  .card > :is(h2, h3) {
    font-family: var(--face-display); font-size: var(--step-2);
    font-weight: 600; color: var(--gold);
    letter-spacing: 0.02em; text-align: center;
    padding-block-end: var(--sp-4);
    border-block-end: 1px solid var(--rule);
    margin-block-end: var(--sp-4);
  }

  .rows { list-style: none; padding: 0; display: grid; gap: var(--sp-4); }
  .row {
    display: grid;
    grid-template-columns: minmax(0, auto) 1fr auto;
    align-items: baseline;
    column-gap: var(--sp-2);
  }
  .row__name { font-size: var(--step-0); }
  .row__note {
    grid-column: 1 / -1;
    font-size: var(--step--1); font-style: italic;
    color: var(--cream-dim); margin-block-start: 0.2rem;
    max-inline-size: 34ch;
  }
  .row__lead {
    border-block-end: 1.5px dotted var(--gold-deep);
    translate: 0 -0.28em; min-inline-size: 1.25rem;
  }
  .row__price {
    font-variant-numeric: tabular-nums;
    color: var(--cream); white-space: nowrap; letter-spacing: 0.01em;
  }
  .row--star .row__name::after {
    content: "Specjalność"; display: inline-block;
    margin-inline-start: 0.6em; padding: 0.1em 0.5em;
    font-size: 0.62em; letter-spacing: 0.11em; text-transform: uppercase;
    font-style: normal; vertical-align: 0.18em;
    color: var(--ground); background: var(--gold); border-radius: 2px;
  }

  /* Two wide columns, not four narrow ones: real dish names like
     "Placek po węgiersku + surówka" need room or the leader vanishes. */
  .grid-boards { display: grid; gap: var(--sp-5); align-items: start; }
  @media (width >= 46rem) { .grid-boards { grid-template-columns: repeat(2, 1fr); } }

  /* ---------- picture pair ---------- */
  .pair {
    display: grid; gap: var(--sp-5);
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
  .shot { margin: 0; }
  /* <picture> is display:inline by default, so a percentage width on the <img>
     inside it has no definite containing block and collapses to zero. */
  .shot picture, .hero picture { display: block; inline-size: 100%; }
  .shot img {
    inline-size: 100%; block-size: 100%; object-fit: cover;
    border-radius: var(--radius); border: 1px solid var(--rule);
  }
  .shot--tall img { aspect-ratio: 4 / 5; }
  .shot--wide img { aspect-ratio: 16 / 10; }
  .shot figcaption {
    margin-block-start: var(--sp-3); font-size: var(--step--1);
    color: var(--cream-dim); font-style: italic;
  }

  /* ---------- practical facts ---------- */
  .facts {
    display: grid; gap: var(--sp-5);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
  .fact { border-block-start: 2px solid var(--gold-deep); padding-block-start: var(--sp-4); }
  .fact :is(h2, h3) {
    font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--gold); font-weight: 600; font-family: var(--face-text);
  }
  .fact p, .fact a { margin-block-start: var(--sp-3); font-size: var(--step-0); }
  /* Standalone links are tap targets, not prose links — give them a real hit area. */
  .fact a, .foot__grid a {
    display: inline-flex; align-items: center;
    min-block-size: 2.75rem; padding-inline-end: 0.15rem;
  }
  /* Short footer nav labels ("Menu", "O nas") are under 44px wide on their own. */
  .footnav { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-inline-start: -0.4rem; }
  .footnav a {
    min-inline-size: 2.75rem; padding-inline: 0.4rem;
    justify-content: center; text-align: center;
  }
  .fact dl { margin-block-start: var(--sp-3); display: grid; gap: var(--sp-2); }
  .fact dl div { display: flex; justify-content: space-between; gap: var(--sp-4); }
  .fact dt { color: var(--cream-dim); }
  .fact dd { margin: 0; font-variant-numeric: tabular-nums; }


  /* ---------- footer ---------- */
  .foot {
    border-block-start: 1px solid var(--rule);
    padding-block: var(--sp-7) var(--sp-6);
    font-size: var(--step--1); color: var(--cream-dim);
  }
  .foot__grid {
    display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: start;
    justify-content: space-between;
  }
  .foot a { color: var(--cream-dim); }
  .foot a:hover { color: var(--gold); }
  .foot__legal { margin-block-start: var(--sp-5); opacity: 0.75; }

  /* ---------- sticky mobile call bar ---------- */
  .callbar {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 30;
    display: none; padding: var(--sp-3);
    background: color-mix(in oklab, var(--ground) 92%, transparent);
    border-block-start: 1px solid var(--rule);
    padding-block-end: max(var(--sp-3), env(safe-area-inset-bottom));
  }
  @supports (backdrop-filter: blur(6px)) { .callbar { backdrop-filter: blur(10px); } }
  .callbar .call { inline-size: 100%; justify-content: center; }
  @media (width < 52rem) {
    .callbar { display: block; }
    body { padding-block-end: 5rem; }
  }
}

@layer components {

  /* ---------- inner-page header (no photo, so the menu starts sooner) ---------- */
  .pagehead { padding-block: var(--sp-8) var(--sp-7); border-block-end: 1px solid var(--rule); }
  .pagehead h1 {
    font-family: var(--face-display); font-size: var(--step-3);
    font-weight: 600; margin-block-start: var(--sp-3);
  }
  .pagehead p {
    color: var(--cream-dim); margin-block-start: var(--sp-4); max-inline-size: var(--measure);
  }

  /* ---------- full menu ---------- */
  .menu-cols { columns: 2; column-gap: var(--sp-6); }
  @media (width < 60rem) { .menu-cols { columns: 1; } }
  .menu-cols > * { break-inside: avoid; margin-block-end: var(--sp-6); }

  .serves {
    border-inline-start: 2px solid var(--gold-deep);
    padding-inline-start: var(--sp-4); margin-block: var(--sp-5) var(--sp-6);
    color: var(--cream-dim); font-style: italic; max-inline-size: var(--measure);
  }
  .sauces { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); padding: 0; list-style: none; }
  .sauces li { color: var(--cream-dim); }

  /* ---------- prose ---------- */
  .prose { max-inline-size: var(--measure); }
  .prose p + p { margin-block-start: var(--sp-5); }
  .prose h2 {
    font-family: var(--face-display); font-size: var(--step-2);
    font-weight: 600; margin-block: var(--sp-7) var(--sp-4); color: var(--cream);
  }
  .prose ul { margin-block-start: var(--sp-4); padding-inline-start: 1.1rem; }
  .prose li { margin-block-start: var(--sp-2); }
  .prose li::marker { color: var(--gold-deep); }

  /* ---------- contact ---------- */
  .contact-grid {
    display: grid; gap: var(--sp-6);
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    align-items: start;
  }
  .hours { inline-size: 100%; border-collapse: collapse; margin-block-start: var(--sp-4); }
  .hours th, .hours td {
    text-align: start; padding-block: var(--sp-3);
    border-block-end: 1px solid var(--rule); font-weight: 400;
  }
  .hours th { color: var(--cream-dim); }
  .hours td { text-align: end; font-variant-numeric: tabular-nums; }
  .hours tr:last-child th, .hours tr:last-child td { border-block-end: 0; }

  .map {
    inline-size: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--rule);
    border-radius: var(--radius); display: block;
  }
}

@media print {
  .masthead, .callbar, .ghost, .call, .foot__grid, .skip, .map { display: none !important; }
  :root { --ground: #fff; --ground-2: #fff; --cream: #000; --cream-dim: #333;
          --gold: #000; --gold-deep: #999; --rule: #ccc; }
  body { background: #fff; color: #000; padding: 0; }
  .card { border-color: #ccc; background: none; }
  .card > :is(h2, h3) { color: #000; }
  .menu-cols { columns: 2; }
  .section, .pagehead { padding-block: 1rem; }
  a[href^="tel:"]::after { content: " " attr(href); }
}

@layer utilities {
  .visually-hidden {
    position: absolute; inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}