/*
  First-fold fit rules for concept website mockups.
  The concept dialog previews these pages in a 680px-tall iframe, so compact
  desktop rules are applied for short viewports and narrow desktop previews.
*/

@media (min-width: 761px) and (max-height: 820px), (min-width: 761px) and (max-width: 1120px) {
  :root {
    --fold-hero-top: 50px;
    --fold-hero-bottom: 46px;
    --fold-page-top: 54px;
    --fold-page-bottom: 44px;
    --fold-gap: 38px;
    --fold-media-height: min(43vh, 320px);
  }

  .roamad-band,
  .r-bar {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.12em !important;
  }

  .site-nav {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .nav {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .nav-inner {
    gap: 20px !important;
    padding-right: 28px !important;
    padding-left: 28px !important;
  }

  .nav ul,
  .nav-links {
    gap: 18px !important;
  }

  .nav ul a,
  .nav-links a,
  .nav-cta,
  .nav .book,
  .lang-toggle {
    font-size: 9.5px !important;
    letter-spacing: 0.12em !important;
  }

  .nav-cta,
  .nav .book {
    padding: 8px 14px !important;
  }

  .nav-wm,
  .brand,
  .wordmark {
    font-size: clamp(24px, 3vw, 32px) !important;
  }

  .hero {
    min-height: 0 !important;
    padding-top: var(--fold-hero-top) !important;
    padding-bottom: var(--fold-hero-bottom) !important;
    gap: var(--fold-gap) !important;
  }

  .hero-inner,
  .hero-grid {
    gap: var(--fold-gap) !important;
  }

  .hero .copy {
    padding: 48px 46px !important;
  }

  .hero h1,
  .hero-text h1,
  h1.drop-title {
    font-size: clamp(42px, 5.8vw, 72px) !important;
    line-height: 0.98 !important;
    margin-bottom: 16px !important;
  }

  .hero-text h1.en,
  .page-hero h1.en {
    font-size: clamp(22px, 3vw, 32px) !important;
    margin-bottom: 16px !important;
  }

  .hero p.lede,
  .hero-text .lede,
  .page-head .lede,
  .page-hero .lede {
    font-size: clamp(15px, 1.6vw, 18px) !important;
    line-height: 1.42 !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
  }

  .hero-text .lede.en,
  .page-hero .lede.en {
    font-size: 14px !important;
    line-height: 1.38 !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
  }

  .hero .meta,
  .hero-text .meta,
  .hero-text .h-eyebrow,
  .hero-text .eyebrow,
  .hero-text .drop-badge,
  .s-num,
  .page-head .s-num,
  .page-hdr .eyebrow,
  .page-hero .eyebrow {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }

  .hero .meta,
  .hero-text .meta,
  .s-num,
  .page-head .s-num {
    font-size: 9.5px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.13em !important;
  }

  .hero-cta,
  .cta,
  .button,
  .page-hero .cta,
  .page-hdr .cta {
    min-height: 0 !important;
    padding: 11px 18px !important;
    font-size: 10px !important;
    letter-spacing: 0.13em !important;
  }

  [style*="margin-top:36px"][style*="display:flex"],
  [style*="margin-top: 36px"][style*="display:flex"] {
    margin-top: 20px !important;
    gap: 10px !important;
  }

  .hero-image,
  .hero .img-side,
  .hero > div:last-child {
    align-self: center !important;
  }

  .hero-image img,
  .hero .img-side img,
  .hero > div > img {
    width: 100% !important;
    height: var(--fold-media-height) !important;
    max-height: var(--fold-media-height) !important;
    object-fit: cover !important;
  }

  body[data-concept="brick"] .hero .img-side,
  body[data-concept="brick"] .hero .img-side img {
    max-height: 340px !important;
  }

  body[data-concept="brick"] .hero {
    grid-template-columns: 1.12fr 0.88fr !important;
  }

  body[data-concept="brick"] .hero h1 {
    font-size: clamp(68px, 8.8vw, 96px) !important;
    line-height: 0.86 !important;
  }

  body[data-concept="openrun"] .hero h1,
  body[data-concept="openrun"] .page-hdr h1,
  body[data-concept="openrun"] .page-hero h1 {
    font-size: clamp(62px, 9vw, 104px) !important;
    line-height: 0.86 !important;
  }

  body[data-concept="openrun"] .hero {
    --fold-media-height: min(42vh, 300px);
  }

  body[data-concept="halfmoon"] .hero,
  body[data-concept="lineage"] .hero,
  body[data-concept="sobremesa"] .hero {
    --fold-hero-top: 44px;
    --fold-hero-bottom: 44px;
  }

  body[data-concept="halfmoon"] .hero-image img,
  body[data-concept="lineage"] .hero-image img,
  body[data-concept="openrun"] .hero-image img,
  body[data-concept="proof"] .hero > div > img,
  body[data-concept="wash"] .hero > div > img {
    object-fit: contain !important;
    background: currentColor;
  }

  body[data-concept="fieldnote"] .hero,
  body[data-concept="fieldnote"] .drop-hero {
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }

  body[data-concept="fieldnote"] .hero-image img {
    aspect-ratio: auto !important;
    height: min(42vh, 310px) !important;
    object-fit: cover !important;
  }

  body[data-concept="commonroom"][data-page="home"] .hero,
  body[data-concept="materia"][data-page="home"] .hero,
  body[data-concept="wash"][data-page="home"] .hero {
    grid-template-columns: 1.18fr 0.82fr !important;
    gap: 34px !important;
  }

  body[data-concept="commonroom"][data-page="home"] .hero h1,
  body[data-concept="materia"][data-page="home"] .hero h1,
  body[data-concept="precedent"][data-page="home"] .hero h1,
  body[data-concept="wash"][data-page="home"] .hero h1 {
    font-size: clamp(42px, 5vw, 58px) !important;
    line-height: 1.03 !important;
  }

  body[data-concept="sobremesa"] .hero h1 {
    font-size: clamp(42px, 5.6vw, 64px) !important;
    line-height: 0.98 !important;
  }

  body[data-concept="sobremesa"] .hero-text .eyebrow {
    margin-bottom: 14px !important;
  }

  body[data-concept="sobremesa"] .hero-text .lede {
    font-size: 15.5px !important;
    line-height: 1.36 !important;
    margin-bottom: 8px !important;
  }

  body[data-concept="sobremesa"] .hero-text .lede.en {
    font-size: 13.5px !important;
    margin-bottom: 14px !important;
  }

  body[data-concept="sobremesa"] .hero-image img {
    height: min(40vh, 292px) !important;
  }

  .page-head,
  .page-hdr {
    padding-top: var(--fold-page-top) !important;
    padding-bottom: var(--fold-page-bottom) !important;
    gap: 34px !important;
  }

  .page-head h1,
  .page-hdr h1 {
    font-size: clamp(42px, 5.8vw, 70px) !important;
    line-height: 1.02 !important;
    margin-bottom: 16px !important;
  }

  .page-hero {
    padding-top: var(--fold-page-top) !important;
    padding-bottom: var(--fold-page-bottom) !important;
  }

  .page-hero .ph-inner {
    padding-top: var(--fold-page-top) !important;
    padding-bottom: var(--fold-page-bottom) !important;
  }

  .page-hero h1 {
    font-size: clamp(42px, 6.2vw, 76px) !important;
    line-height: 0.98 !important;
    margin-bottom: 16px !important;
  }

  .drop-hero {
    padding-top: 52px !important;
    padding-bottom: 48px !important;
  }

  .drop-hero h2 {
    font-size: clamp(54px, 7.6vw, 88px) !important;
    line-height: 0.9 !important;
    margin-bottom: 14px !important;
  }

  body[data-concept="brick"] .page-head h1,
  body[data-concept="brick"] .drop-hero h2 {
    font-size: clamp(64px, 8.5vw, 96px) !important;
    line-height: 0.88 !important;
  }

  body[data-concept="commonroom"] .page-head h1,
  body[data-concept="materia"] .page-head h1,
  body[data-concept="precedent"] .page-head h1,
  body[data-concept="proof"][data-page="about"] .page-head h1,
  body[data-concept="wash"] .page-head h1 {
    font-size: clamp(42px, 5vw, 60px) !important;
  }

  body[data-concept="sobremesa"] .page-hero,
  body[data-concept="sobremesa"] .page-hero .ph-inner {
    padding-top: 48px !important;
    padding-bottom: 44px !important;
  }

  body[data-concept="sobremesa"] .page-hero h1 {
    font-size: clamp(42px, 5.8vw, 68px) !important;
  }

  body[data-concept="sobremesa"] .page-hero .lede {
    font-size: 16px !important;
    line-height: 1.38 !important;
  }

  body[data-concept="brick"][data-page="home"] .hero {
    grid-template-columns: 1.34fr 0.66fr !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    gap: 0 !important;
  }

  body[data-concept="brick"][data-page="home"] .hero .copy {
    padding: 34px 38px !important;
  }

  body[data-concept="brick"][data-page="home"] .hero h1 {
    font-size: clamp(58px, 7vw, 76px) !important;
    line-height: 0.86 !important;
    margin-bottom: 12px !important;
  }

  body[data-concept="brick"][data-page="home"] .hero p.lede {
    font-size: 15px !important;
    line-height: 1.34 !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }

  body[data-concept="brick"][data-page="home"] .hero .meta {
    margin-bottom: 12px !important;
  }

  body[data-concept="commonroom"][data-page="home"] .hero,
  body[data-concept="materia"][data-page="home"] .hero {
    padding-top: 34px !important;
    padding-bottom: 32px !important;
  }

  body[data-concept="materia"][data-page="home"] .hero {
    padding-top: 30px !important;
    padding-bottom: 28px !important;
  }

  body[data-concept="commonroom"][data-page="home"] .hero h1,
  body[data-concept="materia"][data-page="home"] .hero h1 {
    font-size: clamp(38px, 4.4vw, 50px) !important;
    line-height: 1.02 !important;
    margin-bottom: 12px !important;
  }

  body[data-concept="commonroom"][data-page="home"] .hero p.lede,
  body[data-concept="materia"][data-page="home"] .hero p.lede {
    font-size: 15px !important;
    line-height: 1.36 !important;
    margin-bottom: 12px !important;
  }

  body[data-concept="commonroom"][data-page="home"] .hero .meta,
  body[data-concept="materia"][data-page="home"] .hero .meta {
    margin-bottom: 12px !important;
  }

  body[data-concept="sobremesa"][data-page="home"] .hero {
    --fold-hero-top: 30px;
    --fold-hero-bottom: 30px;
  }

  body[data-concept="sobremesa"][data-page="home"] .hero h1 {
    font-size: clamp(38px, 4.9vw, 56px) !important;
    margin-bottom: 6px !important;
  }

  body[data-concept="sobremesa"][data-page="home"] .hero-text h1.en {
    font-size: clamp(20px, 2.6vw, 28px) !important;
    margin-bottom: 10px !important;
  }

  body[data-concept="sobremesa"][data-page="home"] .hero-text .lede {
    font-size: 14.5px !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
  }

  body[data-concept="sobremesa"][data-page="home"] .hero-text .lede.en {
    font-size: 13px !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
  }

  body[data-concept="sobremesa"][data-page="home"] .hero-text .meta {
    margin-bottom: 10px !important;
  }

  body[data-concept="sobremesa"][data-page="home"] .hero-image img {
    height: min(38vh, 258px) !important;
  }
}

@media (max-width: 760px) {
  .roamad-band,
  .r-bar {
    padding: 6px 14px !important;
    font-size: 8px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.1em !important;
  }

  .site-nav {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .nav {
    padding: 12px 20px !important;
  }

  .nav-inner {
    flex-direction: row !important;
    gap: 16px !important;
    padding-right: 20px !important;
    padding-left: 20px !important;
  }

  .nav ul,
  .nav-links,
  .lang-toggle,
  .nav-cta {
    display: none !important;
  }

  .brand,
  .nav-wm,
  .wordmark {
    font-size: clamp(24px, 8vw, 30px) !important;
  }

  .hero {
    grid-template-columns: 1fr !important;
    padding-top: 34px !important;
    padding-right: 22px !important;
    padding-bottom: 38px !important;
    padding-left: 22px !important;
  }

  .hero-inner,
  .hero-grid,
  .hero {
    gap: 28px !important;
  }

  .hero-inner,
  .hero-grid {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .hero .copy {
    padding: 28px 0 !important;
  }

  .hero h1,
  .hero-text h1,
  .page-head h1,
  .page-hdr h1,
  .page-hero h1,
  h1.drop-title {
    font-size: clamp(34px, 10.5vw, 46px) !important;
    line-height: 0.98 !important;
    margin-bottom: 14px !important;
  }

  body[data-concept="brick"] .hero h1,
  body[data-concept="openrun"] .hero h1 {
    font-size: clamp(46px, 14vw, 60px) !important;
    line-height: 0.88 !important;
  }

  .hero p.lede,
  .hero-text .lede,
  .page-head .lede,
  .page-hero .lede {
    font-size: 14px !important;
    line-height: 1.34 !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
  }

  .hero .meta,
  .hero-text .meta,
  .s-num,
  .hero-text .eyebrow,
  .hero-text .h-eyebrow,
  .hero-text .drop-badge {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    font-size: 9px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.11em !important;
  }

  .hero-cta,
  .cta,
  .button {
    padding: 10px 15px !important;
    font-size: 9.5px !important;
    letter-spacing: 0.1em !important;
  }

  [style*="margin-top:36px"][style*="display:flex"],
  [style*="margin-top: 36px"][style*="display:flex"] {
    margin-top: 16px !important;
    gap: 10px !important;
  }

  .hero-image img,
  .hero .img-side img,
  .hero > div > img {
    height: 230px !important;
    max-height: 230px !important;
    object-fit: cover !important;
  }

  body[data-concept="sobremesa"][data-page="home"] .hero {
    padding-top: 26px !important;
    padding-bottom: 30px !important;
  }

  body[data-concept="sobremesa"][data-page="home"] .hero h1 {
    font-size: clamp(32px, 9vw, 40px) !important;
    margin-bottom: 6px !important;
  }

  body[data-concept="sobremesa"][data-page="home"] .hero-text h1.en {
    font-size: 20px !important;
    margin-bottom: 8px !important;
  }

  body[data-concept="sobremesa"][data-page="home"] .hero-text .lede {
    font-size: 13px !important;
    line-height: 1.28 !important;
    margin-bottom: 6px !important;
  }

  body[data-concept="sobremesa"][data-page="home"] .hero-text .lede.en {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }

  .page-head,
  .page-hdr,
  .page-hero,
  .page-hero .ph-inner,
  .drop-hero {
    padding-top: 42px !important;
    padding-bottom: 40px !important;
  }
}