/* Candidate theme supplement. Prefer theme.json and core blocks. */
:where(a,button,input,textarea,select,summary,.wp-element-button):focus-visible{
  outline:3px solid #fff;
  outline-offset:2px;
  box-shadow:0 0 0 6px #25231f;
}
:where(main,[id]){scroll-margin-block-start:7rem}

.vareldon-site-header{
  border-bottom:1px solid #b9af9f;
  padding-block:1rem;
}
.vareldon-site-header__inner{min-height:2.75rem}
.vareldon-wordmark{margin:0}
.vareldon-wordmark a{
  color:inherit;
  font-family:var(--wp--preset--font-family--display);
  font-size:1.2rem;
  letter-spacing:.12em;
  text-decoration:none;
}

.vareldon-site-footer{padding-block:2.25rem 1.75rem}
.vareldon-site-footer p{
  margin:0;
  max-width:52rem;
  font-size:.9rem;
  line-height:1.5;
  letter-spacing:.02em;
}
.vareldon-main{padding-block:3rem 4rem}
.vareldon-main--page,.vareldon-main--centered{padding-block:4rem 6rem}
.vareldon-section{padding-block:3.5rem}
.vareldon-hero{padding-block:5rem}
.vareldon-eyebrow{
  letter-spacing:.12em;
  text-transform:uppercase;
}
.vareldon-private-status{
  background:#25231f;
  color:#eee9df;
  padding:.4rem 1rem;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:.7rem;
}
.vareldon-private-status p{margin:0}


/*
 * v0.6.16 narrow-root correction:
 * v0.6.15 inherited Twenty Twenty-Five's body padding declaration, which
 * references spacing preset slug 50. The child theme had redefined that same
 * slug as 96px, leaving only 128px of content width at a 320px viewport.
 * theme.json now removes the colliding child spacing scale and declares
 * responsive root padding directly. These guards keep the header, status strip
 * and constrained content inside the viewport without hiding overflow.
 */
.vareldon-site-header__inner{
  width:100%;
  max-width:100%;
  min-width:0;
  gap:1rem;
}
.vareldon-wordmark{
  flex:1 1 auto;
  min-width:0;
}
.vareldon-wordmark a{
  display:inline-block;
  max-width:100%;
  white-space:nowrap;
}
.vareldon-site-header .wp-block-navigation{
  flex:0 0 auto;
  min-width:44px;
}
.vareldon-private-status,
.vareldon-private-status p,
.vareldon-eyebrow{
  max-width:100%;
  min-width:0;
}
.vareldon-private-status p{
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
}

/*
 * v0.6.13 hero rules:
 * - retain the stable v0.6.8 grid and bounded 15rem image column;
 * - keep the corrected scoped H1 size introduced in v0.6.12;
 * - use native core Image blocks instead of a Custom HTML <picture> block,
 *   preventing the Site Editor from rendering the artwork in a scrollable
 *   custom-HTML preview frame;
 * - switch between dedicated desktop and mobile artwork with CSS;
 * - keep "Jordan-founded" together only at desktop widths, while allowing
 *   a normal hyphen break on narrow screens when genuinely required.
 */
.vareldon-hero .wp-block-heading{
  max-inline-size:16ch;
  margin-block:.42em .34em;
  font-size:clamp(2.8rem,3.25vw,3.15rem);
  line-height:1.02;
  hyphens:none;
  overflow-wrap:normal;
  word-break:normal;
}
.vareldon-hero__media{margin:0}
.vareldon-hero__media img{
  display:block;
  width:100%;
  height:auto;
}
.vareldon-hero__media--mobile{display:none}

@media(min-width:783px){
  .vareldon-hero .wp-block-columns{
    display:grid;
    grid-template-columns:minmax(0,1fr) 15rem;
    gap:3rem;
    align-items:center;
  }
  .vareldon-hero .wp-block-column{
    min-width:0;
    flex-basis:auto!important;
  }
  .vareldon-hero .wp-block-column:last-child{
    display:flex;
    justify-content:flex-end;
  }
  .vareldon-hero__media{width:15rem;max-width:100%}
  .vareldon-hero__media--desktop{display:block}
  .vareldon-hero__media--mobile{display:none}
  /* The bounded heading and text column have room for the phrase at desktop widths. */
  .vareldon-hero__origin{white-space:nowrap}
  /* Matches hero-threshold-desktop.svg's declared 1600x1040 intrinsic size; reserves space before load. */
  .vareldon-hero__media--desktop img{aspect-ratio:20/13}
}

/* Contact close: keep the operational address readable and unbroken. */
.vareldon-contact-close__grid{align-items:start}
.vareldon-contact-close__label,
.vareldon-contact-close__email,
.vareldon-contact-close__note{margin-block-start:0}
.vareldon-contact-close__label{margin-block-end:.4rem}
.vareldon-contact-close__email{
  margin-block-end:1rem;
  font-size:clamp(1.2rem,1.8vw,1.55rem);
  line-height:1.35;
}
.vareldon-contact-close__email a{
  display:inline-block;
  white-space:nowrap;
  direction:ltr;
  unicode-bidi:isolate;
}
.vareldon-contact-close__note{
  max-width:34rem;
  font-size:1rem;
  line-height:1.6;
}
@media(min-width:900px){
  .vareldon-contact-close__grid{
    display:grid;
    grid-template-columns:minmax(14rem,.8fr) minmax(24rem,1.2fr);
    gap:clamp(3rem,5vw,6rem);
  }
  .vareldon-contact-close__grid>.wp-block-column{
    min-width:0;
    flex-basis:auto!important;
  }
}

.vareldon-site-footer a{
  color:#eee9df;
  text-decoration-thickness:.08em;
  text-underline-offset:.18em;
}
.vareldon-site-footer a:hover,
.vareldon-site-footer a:focus-visible{color:#fff}

/* Core Navigation mobile overlay: visible controls, 44px targets and clear contrast. */
.vareldon-site-header .wp-block-navigation__responsive-container-open,
.vareldon-site-header .wp-block-navigation__responsive-container-close{
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  padding:.5rem;
}
/*
 * WordPress 7.0 Navigation supports dedicated overlay background/text
 * attributes. The header block supplies those values directly, so core emits
 * the overlay colors as inline styles in both editor and front-end rendering.
 * Keep this stylesheet focused on spacing and typography rather than fighting
 * core fallback-color specificity.
 */
.vareldon-site-header .wp-block-navigation__responsive-container.is-menu-open{
  padding:1.5rem;
}
.vareldon-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close,
.vareldon-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  color:inherit;
}
.vareldon-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  align-items:flex-start;
  justify-content:flex-start;
  padding-top:3.5rem;
}
.vareldon-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  display:block;
  font-size:1.25rem;
  padding-block:.7rem;
}
.vareldon-site-header .wp-block-navigation-item__content{
  color:inherit;
  font-size:.875rem;
  letter-spacing:.04em;
  text-decoration:none;
}
.vareldon-site-header .wp-block-navigation-item__content:hover,
.vareldon-site-header .wp-block-navigation-item__content:focus-visible{
  text-decoration:underline;
  text-underline-offset:.25em;
}


/*
 * v0.6.15 narrow-layout correction:
 * WordPress Columns normally stack below 782px, but the authenticated 320px
 * front-end preview showed stacked columns retaining a narrow track. Apply an
 * explicit one-track grid to the affected editorial sections so each child
 * occupies the full mobile content width. This is intentionally scoped and
 * does not alter the verified desktop hero or navigation geometry.
 */
@media(max-width:781px){
  .wp-block-columns.vareldon-house-introduction__grid,
  .wp-block-columns.vareldon-atmospheres__grid,
  .wp-block-columns.vareldon-material__grid,
  .wp-block-columns.vareldon-contact-close__grid{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:2rem;
    width:100%;
  }
  .vareldon-house-introduction__grid>.wp-block-column,
  .vareldon-atmospheres__grid>.wp-block-column,
  .vareldon-material__grid>.wp-block-column,
  .vareldon-contact-close__grid>.wp-block-column{
    width:100%;
    min-width:0;
    margin:0;
  }
  .vareldon-atmospheres__grid .wp-block-image{
    width:100%;
    max-width:20rem;
  }
  .vareldon-contact-close__email{
    font-size:clamp(1.05rem,5vw,1.2rem);
  }
  .vareldon-contact-close__email a{
    max-width:100%;
    white-space:nowrap;
    overflow-wrap:normal;
    word-break:normal;
  }
}

/* A two-column study grid is more legible than four narrow tracks on tablets. */
@media(min-width:782px) and (max-width:899px){
  .wp-block-columns.vareldon-atmospheres__grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:2rem;
  }
  .vareldon-atmospheres__grid>.wp-block-column{
    width:100%;
    min-width:0;
    margin:0;
  }
}

@media(max-width:782px){
  .vareldon-site-header{padding-block:.65rem}
  .vareldon-section,.vareldon-main,.vareldon-main--page,.vareldon-main--centered{padding-block:3rem}
  .vareldon-hero{padding-block:3.75rem}
  .vareldon-hero .wp-block-heading{
    max-inline-size:none;
    font-size:clamp(2.05rem,9.2vw,2.75rem);
    line-height:1.04;
  }
  /* Deliberately no forced nowrap here: at very narrow widths "Jordan-founded" may
     break after the regular hyphen rather than overflow the viewport (spec: do not
     force one line if doing so creates overflow). */
  .vareldon-hero__media{
    width:min(100%,19rem);
    margin-top:2rem;
  }
  .vareldon-hero__media--desktop{display:none}
  .vareldon-hero__media--mobile{display:block}
  /* Matches hero-threshold-mobile.svg's declared 800x1100 intrinsic size. */
  .vareldon-hero__media--mobile img{aspect-ratio:8/11}
  .vareldon-private-status{
    font-size:.65rem;
    letter-spacing:.07em;
  }
}
@media(max-width:360px){
  .vareldon-site-header__inner{gap:.5rem}
  .vareldon-wordmark a{
    font-size:1rem;
    letter-spacing:.1em;
  }
  .vareldon-private-status{
    padding:.45rem .5rem;
    font-size:.6rem;
    line-height:1.35;
    letter-spacing:.045em;
  }
  .vareldon-eyebrow{letter-spacing:.08em}
  .vareldon-hero .wp-block-heading{font-size:2rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media(forced-colors:active){
  :where(a,button,input,textarea,select,summary,.wp-element-button):focus-visible{
    outline:3px solid Highlight;
    box-shadow:none;
  }
}