/* Ultra Luxury Index — R156 autonomous quality pass
   Conservative refinements derived from R155 visual review. */

:root{
  --uli-max-reading:68ch;
  --uli-mobile-pad:14px;
}

html{
  color-scheme:light;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body{
  hanging-punctuation:first last;
}

::selection{
  background:rgba(20,18,14,.14);
}

img{
  height:auto;
}

button,
a{
  -webkit-tap-highlight-color:transparent;
}

a{
  text-decoration-skip-ink:auto;
}

@media (max-width:640px){
  /* Keep the masthead calm and readable while preserving the editorial identity. */
  header{
    padding-inline:max(var(--uli-mobile-pad),env(safe-area-inset-left));
  }

  /* Dense ranking rows benefit from a little more breathing room on small screens. */
  main article,
  main li{
    scroll-margin-top:72px;
  }

  /* Long editorial/product names: preserve full truth, improve scanability. */
  article h1{
    font-size:clamp(2rem,8.7vw,2.8rem);
    line-height:.99;
    letter-spacing:-.018em;
    max-inline-size:20ch;
  }

  article h2,
  article h3{
    line-height:1.07;
  }

  /* Metadata should read as data, not compete with the product name. */
  article dl,
  article table{
    font-variant-numeric:tabular-nums;
  }

  /* Price strings stay visually stable. */
  [class*="price"],
  [class*="precio"]{
    font-variant-numeric:tabular-nums lining-nums;
    white-space:nowrap;
  }
}

@media (min-width:641px) and (max-width:1100px){
  article h1{
    font-size:clamp(2.6rem,5.7vw,4.4rem);
    line-height:.96;
    max-inline-size:16ch;
  }
}

@media (min-width:1101px){
  /* The R155 product title was visually over-dominant at 1440px.
     This keeps the luxury editorial scale while reducing forced line breaks. */
  article h1{
    font-size:clamp(3.35rem,4.7vw,5rem);
    line-height:.95;
    letter-spacing:-.024em;
    max-inline-size:14ch;
  }

  article p,
  article dd{
    max-inline-size:var(--uli-max-reading);
  }
}