/* CFJ concept viewport adapt — C1–C3
   Fixed 1280 artboards → full-bleed on desktop + phone rethink.
   Brand cream/navy/gold unchanged.

   Logo note: assets are tall stacked wordmarks (skyline + type).
   Always constrain by max-height on small screens — width-only caps
   blow the mark up to ~40% of the phone viewport. */

/* Kill the “floating artboard in a grey margin” look on computer */
html {
  width: 100%;
}
body {
  display: block !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  overflow-x: clip;
}

.cfj-artboard {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 100dvh;
  box-sizing: border-box;
}

/* Desktop: full-bleed section backgrounds, centered content measure
   (original comps were ~1280 wide — keep that reading width, not left-hug) */
@media (min-width: 901px) {
  .cfj-artboard {
    --cfj-measure: 1140px;
    --cfj-gutter: max(28px, calc((100% - var(--cfj-measure)) / 2));
  }

  .cfj-artboard [style*="padding: 0 56px"],
  .cfj-artboard [style*="padding: 0 70px"],
  .cfj-artboard [style*="padding: 0 44px"],
  .cfj-artboard [style*="padding: 0 48px"],
  .cfj-artboard [style*="padding: 0 40px"],
  .cfj-artboard [style*="padding: 60px 70px"],
  .cfj-artboard [style*="padding: 0 70px 60px"],
  .cfj-artboard [style*="padding: 0 56px 60px"],
  .cfj-artboard [style*="padding: 0 56px 90px"],
  .cfj-artboard [style*="padding: 0 44px 40px"],
  .cfj-artboard [style*="padding: 0 44px 44px"],
  .cfj-artboard [style*="padding: 78px 56px"],
  .cfj-artboard [style*="padding: 40px 44px"],
  .cfj-artboard [style*="padding: 44px 44px 0"],
  .cfj-artboard [style*="padding: 52px 48px"],
  .cfj-artboard [style*="padding: 62px 70px"],
  .cfj-artboard [style*="padding: 34px 40px"],
  .cfj-artboard [style*="padding: 0 200px"] {
    padding-left: var(--cfj-gutter) !important;
    padding-right: var(--cfj-gutter) !important;
  }

  /* Keep vertical padding when shorthand is overridden */
  .cfj-artboard [style*="padding: 60px 70px"] {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .cfj-artboard [style*="padding: 0 70px 60px"] {
    padding-bottom: 60px !important;
  }
  .cfj-artboard [style*="padding: 0 56px 60px"] {
    padding-bottom: 60px !important;
  }
  .cfj-artboard [style*="padding: 0 56px 90px"] {
    padding-bottom: 90px !important;
  }
  .cfj-artboard [style*="padding: 0 44px 40px"] {
    padding-bottom: 40px !important;
  }
  .cfj-artboard [style*="padding: 0 44px 44px"] {
    padding-bottom: 44px !important;
  }
  .cfj-artboard [style*="padding: 78px 56px"] {
    padding-top: 78px !important;
    padding-bottom: 78px !important;
  }
  .cfj-artboard [style*="padding: 40px 44px"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .cfj-artboard [style*="padding: 44px 44px 0"] {
    padding-top: 44px !important;
    padding-bottom: 0 !important;
  }
  .cfj-artboard [style*="padding: 52px 48px"] {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  .cfj-artboard [style*="padding: 62px 70px"] {
    padding-top: 62px !important;
    padding-bottom: 62px !important;
  }
  .cfj-artboard [style*="padding: 34px 40px"] {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  /* Full-width grids / bands with no side padding — inset to measure */
  .cfj-artboard [style*="grid-template-columns: repeat(3"],
  .cfj-artboard [style*="grid-template-columns: repeat(4"],
  .cfj-artboard [style*="grid-template-columns: 1.4fr"],
  .cfj-artboard [style*="grid-template-columns: 1.5fr"],
  .cfj-artboard [style*="grid-template-columns: repeat(6"] {
    padding-left: var(--cfj-gutter) !important;
    padding-right: var(--cfj-gutter) !important;
    box-sizing: border-box;
  }
}

/* Coarse pointers: enlarge tappable chrome */
@media (pointer: coarse) {
  .cfj-artboard a {
    min-height: 44px;
  }
  .cfj-artboard a[style*="padding: 0 18px"],
  .cfj-artboard a[style*="padding: 0 26px"],
  .cfj-artboard a[style*="padding: 0 34px"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
  }
}

@media (max-width: 900px) {
  body {
    display: block !important;
    overflow-x: visible;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .cfj-artboard {
    width: 100% !important;
  }

  /* —— Logos: compact chrome, not hero art —— */
  .cfj-artboard img[src*="cfj-logo"] {
    max-height: 44px !important;
    max-width: min(140px, 42vw) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Centered masthead wordmarks (C1 Home) — readable on phone, not tiny */
  .cfj-artboard [style*="flex-direction: column"][style*="align-items: center"] > img[src*="cfj-logo"],
  .cfj-artboard [style*="align-items: center"][style*="justify-content: center"] > img[src*="cfj-logo"] {
    max-height: 72px !important;
    max-width: min(200px, 56vw) !important;
  }

  /* Fixed masthead towers → padded natural height */
  .cfj-artboard [style*="height: 200px"],
  .cfj-artboard [style*="height: 280px"] {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    gap: 10px !important;
  }

  .cfj-artboard [style*="height: 42px"] {
    height: auto !important;
    min-height: 40px;
    flex-wrap: wrap !important;
    row-gap: 6px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .cfj-artboard [style*="height: 58px"] {
    height: auto !important;
    min-height: 48px;
  }

  /* Stack multi-column grids */
  .cfj-artboard [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }

  /* Stack common side-by-side flex bands */
  .cfj-artboard [style*="display: flex"][style*="justify-content: space-between"],
  .cfj-artboard [style*="display: flex; align-items: center; justify-content: space-between"],
  .cfj-artboard [style*="display: flex; align-items: center; gap: 64px"] {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 16px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  /* Portrait / cover / sidebar fixed widths → full width */
  .cfj-artboard [style*="width: 440px"],
  .cfj-artboard [style*="width: 420px"],
  .cfj-artboard [style*="width: 380px"],
  .cfj-artboard [style*="width: 330px"],
  .cfj-artboard [style*="width: 280px"],
  .cfj-artboard [style*="width: 240px"],
  .cfj-artboard [style*="width: 230px"],
  .cfj-artboard [style*="width: 200px"],
  .cfj-artboard [style*="width: 820px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Letter / publication side-by-side → column */
  .cfj-artboard [style*="display: flex"][style*="background: #EFE8D8"],
  .cfj-artboard [style*="display: flex"][style*="gap: 64px"],
  .cfj-artboard [style*="display: flex"][style*="gap: 60px"] {
    flex-direction: column !important;
    height: auto !important;
  }

  /* Compress outer gutters */
  .cfj-artboard [style*="padding: 0 56px"],
  .cfj-artboard [style*="padding: 0 70px"],
  .cfj-artboard [style*="padding: 0 44px"],
  .cfj-artboard [style*="padding: 0 48px"],
  .cfj-artboard [style*="padding: 0 180px"],
  .cfj-artboard [style*="padding: 0 200px"],
  .cfj-artboard [style*="padding: 0 40px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .cfj-artboard [style*="padding: 62px 70px"],
  .cfj-artboard [style*="padding: 52px 48px"],
  .cfj-artboard [style*="padding: 44px 44px"],
  .cfj-artboard [style*="padding: 78px 56px"] {
    padding: 24px 16px !important;
  }

  /* Nav rows: wrap cleanly, shorter tracking, thumb height */
  .cfj-artboard nav[aria-label="Primary"],
  .cfj-artboard [style*="gap: 38px"],
  .cfj-artboard [style*="gap: 30px"][style*="text-transform: uppercase"],
  .cfj-artboard [style*="gap: 28px"][style*="text-transform: uppercase"] {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 44px !important;
    gap: 4px 12px !important;
    padding: 10px 16px !important;
    justify-content: center !important;
    letter-spacing: 0.1em !important;
    font-size: 11px !important;
  }

  .cfj-artboard nav[aria-label="Primary"] a,
  .cfj-artboard a[style*="padding: 0 18px"] {
    min-height: 40px !important;
    padding: 8px 10px !important;
  }

  /* Hero CTA pairs → full-width stack */
  .cfj-artboard [style*="display: flex"][style*="gap: 16px"][style*="margin-top"],
  .cfj-artboard [style*="display: flex"][style*="gap: 14px"][style*="margin-top"] {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .cfj-artboard [style*="display: flex"][style*="gap: 16px"][style*="margin-top"] > a,
  .cfj-artboard [style*="display: flex"][style*="gap: 14px"][style*="margin-top"] > a {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Hero / cinematic blocks: allow natural height */
  .cfj-artboard [style*="min-height: 640px"],
  .cfj-artboard [style*="height: 844px"],
  .cfj-artboard [style*="height: 640px"],
  .cfj-artboard [style*="height: 520px"],
  .cfj-artboard [style*="height: 470px"],
  .cfj-artboard [style*="height: 440px"],
  .cfj-artboard [style*="height: 420px"],
  .cfj-artboard [style*="height: 400px"],
  .cfj-artboard [style*="height: 330px"],
  .cfj-artboard [style*="height: 250px"],
  .cfj-artboard [style*="height: 240px"],
  .cfj-artboard [style*="height: 200px"],
  .cfj-artboard [style*="height: 280px"] {
    height: auto !important;
    min-height: 0 !important;
  }

  .cfj-artboard [style*="min-height: 640px"] {
    min-height: min(70dvh, 520px) !important;
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  /* Display type: readable on narrow screens */
  .cfj-artboard h1,
  .cfj-artboard h2[style*="font-size: 62px"],
  .cfj-artboard [style*="font-size: 62px"],
  .cfj-artboard [style*="font-size: 92px"],
  .cfj-artboard [style*="font-size: 54px"],
  .cfj-artboard [style*="font-size: 44px"],
  .cfj-artboard [style*="font-size: 40px"] {
    font-size: clamp(1.5rem, 6.5vw, 2.35rem) !important;
    line-height: 1.2 !important;
  }

  .cfj-artboard [style*="font-size: 24px"][style*="Cormorant"],
  .cfj-artboard [style*="font-style: italic"][style*="font-size: 24px"] {
    font-size: clamp(1.05rem, 4vw, 1.25rem) !important;
  }

  .cfj-artboard [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  /* Forms full width */
  .cfj-artboard input,
  .cfj-artboard select,
  .cfj-artboard textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important; /* iOS zoom prevention */
  }
}

@media (max-width: 480px) {
  .cfj-artboard img[src*="cfj-logo"] {
    max-height: 40px !important;
    max-width: min(120px, 38vw) !important;
  }

  .cfj-artboard [style*="flex-direction: column"][style*="align-items: center"] > img[src*="cfj-logo"],
  .cfj-artboard [style*="align-items: center"][style*="justify-content: center"] > img[src*="cfj-logo"] {
    max-height: 44px !important;
    max-width: min(140px, 44vw) !important;
  }

  .cfj-artboard [style*="font-size: 12px"][style*="letter-spacing"],
  .cfj-artboard [style*="letter-spacing: 0.3em"],
  .cfj-artboard [style*="letter-spacing: 0.17em"] {
    letter-spacing: 0.1em !important;
  }

  /* Utility bar: hide secondary chrome links if cramped — keep brand */
  .cfj-artboard [style*="height: 42px"] > div[style*="gap: 28px"] {
    display: none !important;
  }
}

/* harden — overflow, skip link, landmark display */
.cfj-skip{
  position:fixed;left:max(16px,env(safe-area-inset-left));top:0;z-index:10000;
  transform:translateY(-160%);padding:12px 18px;background:#1B2A41;color:#F7F3EA;
  font-family:'Cinzel',serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;outline:2px solid #A97E3F;outline-offset:2px;
  transition:transform .2s ease-out;
}
.cfj-skip:focus,.cfj-skip:focus-visible{
  transform:translateY(max(16px,env(safe-area-inset-top)));
}
.cfj-landmark{display:contents}
.cfj-artboard,.cfj-artboard > *{min-width:0}
.cfj-artboard p,.cfj-artboard li,.cfj-artboard h1,.cfj-artboard h2,.cfj-artboard h3,.cfj-artboard h4,
.cfj-artboard td,.cfj-artboard th,.cfj-artboard label{
  overflow-wrap:break-word;word-wrap:break-word}
.cfj-artboard img{max-width:100%;height:auto}
/* Logos win over the generic img rule above when both apply */
.cfj-artboard img[src*="cfj-logo"]{max-width:min(100%,200px)}
/* C1 Classic centered masthead — allow a larger wordmark on desktop */
@media (min-width:901px){
  .cfj-artboard [style*="height: 280px"] > img[src*="cfj-logo"],
  .cfj-artboard [style*="flex-direction: column"][style*="align-items: center"] > img[src*="cfj-logo"][style*="height:120px"]{
    max-width:min(100%,300px)!important;
    max-height:120px!important;
    height:120px!important;
    width:auto!important;
  }
}

/* CTAs — optical center, Cinzel chrome (fixes cramped EB Garamond pills) */
.cfj-artboard a[style*="display: inline-flex"][style*="min-height: 46px"],
.cfj-artboard a[style*="display: inline-flex"][style*="min-height: 48px"],
.cfj-artboard a[style*="display: inline-flex"][style*="min-height: 52px"],
.cfj-artboard a[style*="display: inline-flex"][style*="min-height: 54px"],
.cfj-artboard a[style*="display: inline-flex"][style*="min-height: 56px"],
.cfj-artboard button[style*="min-height: 48px"],
.cfj-artboard button[style*="min-height: 52px"]{
  box-sizing:border-box!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:48px!important;
  padding:14px 22px!important;
  font-family:'Cinzel',serif!important;
  font-size:11px!important;
  font-weight:500!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  line-height:1.15!important;
  text-decoration:none!important;
  border-radius:2px!important;
}
.cfj-artboard a[style*="display: inline-flex"][style*="width: 100%"][style*="min-height"]{
  padding-left:22px!important;
  padding-right:22px!important;
}
/* Fixed-height chrome: border must sit inside height or overflow:hidden clips CTA bottoms */
.cfj-artboard [style*="height: 96px"][style*="border-bottom"],
.cfj-artboard [style*="height: 940px"][style*="overflow: hidden"]{
  box-sizing:border-box!important;
}