/* Elliott Forman — global mobile / tablet optimisation.
   Pages are built with inline styles, so overrides use !important. */

html, body { max-width: 100%; overflow-x: hidden; }
img, video { max-width: 100%; }

/* ---------- mobile nav (injected by ef-nav.js) ---------- */
.ef-burger {
  display: none;
  width: 46px; height: 42px; padding: 0;
  background: transparent; border: 1px solid rgba(198,161,75,.5);
  color: #C6A14B; cursor: pointer;
  align-items: center; justify-content: center; gap: 5px; flex-direction: column;
}
.ef-burger i { display: block; width: 20px; height: 1.5px; background: currentColor; transition: transform .25s, opacity .2s; }
.ef-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.ef-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.ef-burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.ef-mobile-nav {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(13,14,18,.98);
  backdrop-filter: blur(8px);
  display: none; flex-direction: column; justify-content: center;
  padding: 96px 8vw 48px;
  opacity: 0; transition: opacity .25s ease;
}
.ef-mobile-nav.open { display: flex; opacity: 1; }
.ef-mobile-nav a {
  font-family: 'Anton', Impact, sans-serif; text-transform: uppercase;
  letter-spacing: .03em; font-size: clamp(28px, 9vw, 44px); line-height: 1.1;
  color: #F4EFE6; text-decoration: none; padding: 12px 0;
  border-bottom: 1px solid rgba(198,161,75,.22);
}
.ef-mobile-nav a:last-child { border-bottom: 0; }
.ef-mobile-nav a.cta {
  margin-top: 26px; background: #C6A14B; color: #0D0E12; border: 0;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .12em;
  padding: 18px 22px; text-align: center;
}

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  section[style*="8vw"], header[style] > div, .sec { padding-left: 6vw !important; padding-right: 6vw !important; }
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
  [style*="gap: 80px"], [style*="gap: 72px"] { gap: 48px !important; }
  header nav ul, .site-head ul { gap: 18px !important; }
  header a[style*="border: 1px solid #C6A14B"], .site-head .btn { white-space: nowrap; padding: 11px 14px !important; font-size: 10.5px !important; }
  header[style] > div, .site-head .bar { gap: 14px !important; }
}

/* ---------- phone ---------- */
@media (max-width: 780px) {
  body { font-size: 16.5px; }

  /* nav */
  header nav ul, .site-head ul { display: none !important; }
  .ef-burger { display: flex; }
  header[style] > div, .site-head .bar { padding: 14px 6vw !important; gap: 12px !important; }
  header .ef-head-cta { display: none !important; }

  /* stack every inline grid */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(2, 1fr)"] { grid-template-columns: 1fr 1fr !important; }

  /* section rhythm */
  section[style*="padding: 110px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  section[style*="8vw"] { padding-left: 6vw !important; padding-right: 6vw !important; }
  .sec { padding: 64px 6vw !important; }
  .band { padding: 64px 6vw !important; min-height: 340px !important; }
  .page-hero { padding: 120px 6vw 48px !important; min-height: 52vh !important; }

  /* homepage hero */
  #top { grid-template-columns: 1fr !important; min-height: auto !important; }
  #top > div:first-child { display: none !important; }
  #top > div:last-child { padding: 118px 6vw 44px !important; min-height: 88vh !important; }
  #top img {
    width: 100% !important; object-position: 50% 18% !important;
    mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,.25) 78%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,.25) 78%, transparent 100%) !important;
    -webkit-mask-composite: source-over !important; mask-composite: add !important;
  }
  #top > div:last-child > div[aria-hidden="true"] {
    background: linear-gradient(0deg, #0D0E12 26%, rgba(13,14,18,.82) 48%, rgba(13,14,18,.45) 72%, rgba(13,14,18,.7) 100%) !important;
  }
  #top [style*="max-width: min(56vw"] { max-width: 100% !important; }
  #top h1 { font-size: clamp(46px, 15vw, 74px) !important; }
  #top a[href="/contact"] { display: block; text-align: center; width: 100%; }
  #top [style*="margin-top: 64px"] { margin-top: 34px !important; gap: 10px !important; }
  #top [style*="margin-top: 64px"] span { font-size: 10px !important; }

  /* type + media */
  h1.display { font-size: clamp(36px, 11vw, 56px) !important; }
  h2.display, h2[style*="clamp(34px"] { font-size: clamp(28px, 8.5vw, 42px) !important; }
  .lede, p[style*="font-size: 20px"] { font-size: 17px !important; }
  img[style*="height: 540px"] { height: 300px !important; }
  [style*="grid-template-columns: 200px 1fr"] { grid-template-columns: 150px 1fr !important; gap: 22px !important; }
  img[style*="width: 200px"] { width: 150px !important; height: 225px !important; box-shadow: 8px 8px 0 rgba(198,161,75,.2) !important; }
  [style*="aspect-ratio: 4/5"] { aspect-ratio: 3/2 !important; }
  [style*="min-height: 320px"], [style*="min-height: 220px"] { min-height: 0 !important; }
  [style*="padding: 48px 36px"], [style*="padding: 40px 32px"], [style*="padding: 34px"] { padding: 30px 24px !important; }
  .cell { padding: 32px 24px !important; }
  .numbers { grid-template-columns: 1fr 1fr !important; }
  .numbers > div { padding: 24px 18px !important; }
  .site-foot { padding: 34px 6vw !important; }

  /* tap targets */
  a.btn, button.btn, .field input, .field select, .field textarea { min-height: 46px; }
  .field input, .field select, .field textarea { font-size: 16px !important; }
  form[style*="display: flex"] { flex-wrap: wrap; }
}

@media (max-width: 620px) {
  /* book cards: cover on top, copy full width — no squeezed column */
  [style*="grid-template-columns: 200px 1fr"] { grid-template-columns: 1fr !important; gap: 26px !important; }
  img[style*="width: 200px"] { width: 168px !important; height: 252px !important; justify-self: start; }
}

@media (max-width: 460px) {
  .numbers { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(2, 1fr)"] { grid-template-columns: 1fr !important; }
}

/* ---------- mobile type scale + vertical rhythm ---------- */
@media (max-width: 780px) {
  body { line-height: 1.8 !important; letter-spacing: .005em; }

  /* headings: fluid, never cramped, a touch more leading */
  [style*="clamp(52px, 8vw, 116px)"] { font-size: clamp(44px, 13.5vw, 74px) !important; line-height: 1.04 !important; }
  [style*="clamp(34px, 4.6vw, 58px)"],
  [style*="clamp(30px, 3.6vw, 48px)"],
  [style*="clamp(28px, 3.6vw, 48px)"] { font-size: clamp(29px, 8vw, 42px) !important; line-height: 1.14 !important; }
  [style*="clamp(22px, 2.4vw, 32px)"] { font-size: clamp(22px, 6.2vw, 28px) !important; line-height: 1.24 !important; }
  [style*="clamp(18px, 2vw, 23px)"] { font-size: 18.5px !important; line-height: 1.55 !important; }
  [style*="font-size: 64px"] { font-size: clamp(38px, 11vw, 54px) !important; line-height: 1.08 !important; }
  [style*="font-size: 32px"], [style*="font-size: 30px"] { font-size: 25px !important; line-height: 1.24 !important; }
  [style*="font-size: 28px"], [style*="font-size: 26px"] { font-size: 23px !important; line-height: 1.28 !important; }
  [style*="font-size: 22px"] { font-size: 20px !important; line-height: 1.35 !important; }
  h1, h2, h3, h4 { text-wrap: balance; }

  /* body + lede */
  [style*="font-size: 18px"], [style*="font-size: 17px"] { font-size: 17px !important; line-height: 1.7 !important; }
  [style*="font-size: 16px"], [style*="font-size: 15.5px"],
  [style*="font-size: 15px"], [style*="font-size: 14.5px"] { font-size: 15.5px !important; line-height: 1.75 !important; }
  p { margin-top: 0 !important; }
  p + p { margin-top: 1.05em !important; }

  /* micro-labels / eyebrows: bigger and less tight tracking so they stay legible */
  [style*="font-size: 11.5px"], [style*="font-size: 11px"],
  [style*="font-size: 10.5px"], [style*="font-size: 10px"],
  [style*="font-size: 9.5px"] { font-size: 11px !important; line-height: 1.5 !important; letter-spacing: .1em !important; }

  /* breathing room between blocks */
  section > * + * { margin-top: 0; }
  .sec, section[style*="8vw"] { padding-top: 68px !important; padding-bottom: 68px !important; }
  [style*="gap: 60px"], [style*="gap: 56px"], [style*="gap: 48px"] { gap: 34px !important; }
  [style*="gap: 40px"], [style*="gap: 36px"], [style*="gap: 32px"] { gap: 26px !important; }
  [style*="margin-top: 40px"], [style*="margin-top: 44px"], [style*="margin-top: 48px"] { margin-top: 30px !important; }
  [style*="margin-bottom: 40px"], [style*="margin-bottom: 48px"] { margin-bottom: 30px !important; }
  blockquote, [style*="font-style: italic"] { line-height: 1.6 !important; }
}

@media (max-width: 460px) {
  body { font-size: 16px; }
  [style*="clamp(52px, 8vw, 116px)"] { font-size: clamp(40px, 12.5vw, 56px) !important; }
  [style*="clamp(34px, 4.6vw, 58px)"],
  [style*="clamp(30px, 3.6vw, 48px)"],
  [style*="clamp(28px, 3.6vw, 48px)"] { font-size: clamp(26px, 7.6vw, 34px) !important; }
  .sec, section[style*="8vw"] { padding-left: 7vw !important; padding-right: 7vw !important; }
}

/* doors grid: let card height follow its copy on phones */
@media (max-width: 780px) {
  #doors > div:last-child > a {
    aspect-ratio: auto !important;
    min-height: 300px !important;
    padding: 26px 24px 28px !important;
  }
  #doors > div:last-child > a h3 { margin-bottom: 2px !important; }
  #doors > div:last-child > a p { max-width: 100% !important; }
}

/* heading-to-copy gap */
@media (max-width: 780px) {
  h1 + p, h2 + p, h3 + p, h4 + p,
  h1 + div, h2 + div, h3 + div { margin-top: .7em !important; }
}

/* About hero boxer cutout — keep the full figure visible on every screen */
@media (max-width: 900px){
  .page-hero .boxer-cutout{ height: min(58%, 420px) !important; max-width: 52% !important; right: -6% !important; opacity: .5; }
}
@media (max-width: 640px){
  .page-hero .boxer-cutout{ height: min(48%, 330px) !important; max-width: 66% !important; opacity: .34; }
}

/* Internal page heroes — full-bleed image + full-width copy on small screens */
@media (max-width: 900px){
  .page-hero img.bg:not(.boxer-cutout){
    width: 100% !important; right: 0 !important; left: 0 !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,.35) 100%) !important;
    mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,.35) 100%) !important;
    filter: grayscale(.35) contrast(1.06) brightness(.5) !important;
  }
  .page-hero .inner{ max-width: 100% !important; }
}

/* About hero — large full-bleed boxer figure */
.about-hero .inner { max-width: 62% !important; order: 1; }
/* Large desktops: cap the figure so it doesn't blow up past ~1280px */
@media (min-width: 1101px){
  .about-hero .boxer-cutout{
    width: min(30%, 400px) !important;
    max-width: none !important;
    top: 150px !important;
    height: calc(100% - 150px) !important;
    object-fit: cover !important;
    object-position: 50% 0% !important;
  }
}
@media (max-width: 1100px){
  .about-hero .boxer-cutout{ width: 34% !important; height: calc(100% - 150px) !important; max-width: none !important; right: 0 !important; opacity: .8 !important; object-fit: cover !important; object-position: 50% 0% !important; }
  .about-hero .inner { max-width: 66% !important; }
}
@media (max-width: 900px){
  .about-hero .boxer-cutout{ width: 46% !important; height: calc(100% - 72px) !important; max-width: none !important; right: 0 !important; opacity: .55 !important; }
}

@media (max-width: 780px){
  .about-hero { min-height: auto !important; }
  .about-hero .inner { max-width: 100% !important; }
  .about-hero .boxer-cutout{
    position: relative !important; top: auto !important; bottom: auto !important;
    width: 78% !important; height: auto !important; max-height: 46vh !important; max-width: none !important; right: auto !important;
    margin: 26px auto 0 !important; display: block !important; opacity: .9 !important;
    order: 2;
  }
}