/* GLF Enterprises - site styles
   Light ground, Merriweather bold italic for headings, Helvetica for body.
   Shared by every page so the whole site changes from one file. */
body { margin: 0; background: #fbfaf8; }
a { color: #9a5530; text-decoration: none; }
a:hover { color: #6e3a1e; }

/* ONE gutter for the whole page. Every section uses .pad, so every left
   edge lines up no matter how wide the window gets. */
.pad { padding-left: 72px; padding-right: 72px; }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: scale(1.08); } to { transform: scale(1); } }
.r { opacity: 0; animation: rise 1s cubic-bezier(.22,1,.36,1) forwards; }
.d1{animation-delay:.15s} .d2{animation-delay:.3s} .d3{animation-delay:.5s}
.d4{animation-delay:.68s} .d5{animation-delay:.9s}
.hero-img { animation: drift 26s cubic-bezier(.16,.62,.31,1) forwards; }

.tile img { transition: transform 1.1s cubic-bezier(.22,1,.36,1); }
.tile:hover img { transform: scale(1.05); }
.cta { transition: background .5s ease, color .5s ease, border-color .5s ease; }
.cta-ghost:hover { border-color: #1c1c1c; }
.lnk { border-bottom: 1px solid #d3cec6; padding-bottom: 3px; transition: border-color .4s ease; }
.lnk:hover { border-color: #9a5530; }
.soc { display: inline-flex; align-items: center; gap: 9px; color: #5e5a54; transition: color .4s ease; }
.soc:hover { color: #9a5530; }

/* Scroll reveals. The hidden state is scoped to .js, which the script adds -
   so if the script never runs, nothing is ever hidden. */
.js .rv, .js .rv-l, .js .rv-r, .js .rv-s {
  opacity: 0; will-change: opacity, transform;
  transition: opacity .95s cubic-bezier(.22,1,.36,1), transform .95s cubic-bezier(.22,1,.36,1);
}
.js .rv   { transform: translateY(64px); }
.js .rv-l { transform: translateX(-70px); }
.js .rv-r { transform: translateX(70px); }
.js .rv-s { transform: scale(1.08); }
.js .in   { opacity: 1; transform: none; }
.js .s2 { transition-delay: .10s } .js .s3 { transition-delay: .20s } .js .s4 { transition-delay: .30s }

@media (prefers-reduced-motion: reduce) {
  .r, .hero-img { animation: none; opacity: 1; transform: none; }
  .tile img, .tile:hover img { transition: none; transform: none; }
  .js .rv, .js .rv-l, .js .rv-r, .js .rv-s { opacity: 1; transform: none; transition: none; }
  .js .px { transform: none !important; }
}

/* shared page furniture */
.wrap { width: 100%; max-width: 1760px; margin: 0 auto; }
a { text-decoration: none; }
.nav a, .foot a { color: inherit; }
.nav a:hover, .foot a:hover { color: #9a5530; }
.page-head { padding-top: 130px; padding-bottom: 96px; border-bottom: 1px solid #e6e2db; }
.page-head h1 { font-family: 'Merriweather', Georgia, serif; font-weight: 700; font-style: italic;
  font-size: clamp(38px, 4.2vw, 54px); line-height: 1.14; margin: 0; max-width: 20ch; }
.page-head p { font-size: 18px; line-height: 1.75; color: #4d4945; max-width: 54ch; margin: 28px 0 0; }
.eyebrow { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: #9a5530; margin-bottom: 26px; }

/* blog post body */
.post-body h2 { font-family: 'Merriweather', Georgia, serif; font-weight: 700; font-style: italic;
  font-size: 26px; line-height: 1.2; color: #1c1c1c; margin: 52px 0 20px; }
.post-body h3 { font-size: 20px; font-weight: 500; color: #1c1c1c; margin: 44px 0 16px; }
.post-body p { margin: 0 0 22px; }
.post-body a { color: #9a5530; border-bottom: 1px solid #d3cec6; padding-bottom: 1px; }
.post-body a:hover { border-color: #9a5530; }
.post-body ul, .post-body ol { padding-left: 24px; margin: 0 0 22px; }
.post-body li { margin-bottom: 10px; }
.post-body strong { color: #1c1c1c; }

/* blog index cards */
a[href^="blog/"]:hover, a[href^="../blog.html"]:hover { border-color: #bfb9b0 !important; }

/* light version: outline buttons use ink, not the link color */
.cta-ghost { color: #1c1c1c; }
.cta-ghost:hover { color: #1c1c1c; border-color: #1c1c1c; }

/* gallery lightbox */
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(20,20,20,.92); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gal a { cursor: zoom-in; }

/* blog index */
.post-card img { transition: transform 1.1s cubic-bezier(.22,1,.36,1); }
.post-card:hover img { transform: scale(1.04); }
.post-card:hover .post-title { color: #9a5530 !important; }
.post-nav:hover div:last-child { color: #9a5530; }

/* ---------- Phones and small tablets ----------
   Page layouts are written inline for desktop. These rules re-flow them on narrow
   screens, so every page is fixed from this one place. */
.menu-btn { display: none; }
@media (max-width: 1140px) {
  /* header: logo + Menu button; links drop down when opened */
  .nav { display: none !important; }
  .menu-btn { display: inline-block; font: inherit; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
    background: none; border: 1px solid #bfb9b0; color: #1c1c1c; padding: 10px 16px; cursor: pointer; }
  .nav-open .nav { display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 18px !important;
    width: 100%; padding-top: 22px; font-size: 15px !important; }
  .nav-open { flex-wrap: wrap; }

}
@media (max-width: 900px) {
  .pad { padding-left: 20px !important; padding-right: 20px !important; }

  /* every grid becomes one column, except the ones listed below */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; gap: 36px !important; }
  /* photo tiles, gallery and stat rows stay two across */
  [style*="repeat(4, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
  [style*="repeat(4, minmax(0, 1fr))"][style*="padding: 84px 40px"] { padding: 40px 20px 8px !important; }
  [style*="gap: 46px"], [style*="gap: 40px 32px"] { gap: 32px 20px !important; }

  /* big desktop spacing shrinks */
  [style*="padding-top: 1"], [style*="padding-top: 80px"], [style*="padding-top: 88px"], [style*="padding-top: 92px"] { padding-top: 64px !important; }
  [style*="padding-bottom: 100px"], [style*="padding-bottom: 110px"], [style*="padding-bottom: 116px"], [style*="padding-bottom: 124px"], [style*="padding-bottom: 128px"], [style*="padding-bottom: 130px"], [style*="padding-bottom: 134px"], [style*="padding-bottom: 148px"], [style*="padding-bottom: 158px"], [style*="padding-bottom: 160px"], [style*="padding-bottom: 88px"] { padding-bottom: 64px !important; }
  .page-head { padding-top: 56px !important; padding-bottom: 56px !important; }
  [style*="padding: 40px 34px 36px"] { padding: 28px 22px !important; }

  /* fixed heights become natural */
  [style*="height: 780px"] { height: auto !important; min-height: 560px; }
  [style*="height: 780px"] > div { position: relative !important; padding: 72px 20px !important; }
  [style*="height: 780px"] > img { position: absolute; inset: 0; }
  [style*="height: 470px"] { height: 300px !important; }
  [style*="min-height: 4"] { min-height: 0 !important; height: 300px !important; }

  /* type */
  h1 { font-size: 44px !important; line-height: 1.08 !important; }
  .page-head h1 { font-size: 40px !important; }
  h2[style*="font-size"], [style*="font-size: clamp(36px"] { font-size: 32px !important; line-height: 1.15 !important; }
  [style*="font-size: 4"], [style*="font-size: 5"] { font-size: 32px !important; line-height: 1.15 !important; }
  [style*="font-size: 18px"], .page-head p { font-size: 17px !important; }

  /* button rows and footers wrap instead of running off the screen */
  [style*="display: flex"] { flex-wrap: wrap; }
  [style*="flex-direction: column"] { flex-wrap: nowrap !important; }
  [style*="padding: 17px 34px"], [style*="padding: 17px 38px"] { padding: 15px 24px !important; }

  [style*="gap: 0 64px"] { gap: 0 !important; }
  p[style*="font-size: 32px"] { font-size: 24px !important; line-height: 1.5 !important; }
  .lightbox { padding: 8px; }
  /* sideways slide-ins push past the screen edge on phones; slide up instead */
  .js .rv-l, .js .rv-r { transform: translateY(40px); }
  .js .rv-l.in, .js .rv-r.in { transform: none; }
  body { overflow-x: clip; }
}
@media (max-width: 420px) {
  h1 { font-size: 38px !important; }
  [style*="repeat(4, minmax(0, 1fr))"][style*="gap: 46px"] { grid-template-columns: minmax(0, 1fr) !important; }
}
.itf-credit img { opacity: .9; transition: opacity .3s ease; }
.itf-credit:hover img { opacity: 1; }