/* ─────────────────────────────────────────────────────────────────────────
   WORK SECTION (#work) — added Oct 10, 2026.
   Its own file so style.css is untouched. index.html loads it right after
   style.css:  <link rel="stylesheet" href="css/work.css?v=20261010-work1">
   Bump the ?v= whenever this file changes (vercel.json caches /css/* for 7 days).

   Layout: dark walnut band by default; since Oct 11 the homepage uses the cream
   .work--light variant (end of file) between Short Game Green and Your clubhouse,
   so the page keeps its light/dark rhythm. A head block, one
   wide photo with the same brass offset mat as the Short Game Green, then four
   items: Work Tables, Lounge Areas, Conference Room, Phone Booths.
     desktop  > 1100px : 4 across
     tablet  701–1100px: 2 across
     phone     <= 700px: stacked, one per row
   Every image has width/height attributes AND a CSS aspect-ratio, plus
   height:auto, so nothing can stretch on a narrow screen (see README, Oct 9).
   Uses only the site's existing tokens (--oak-*) and type classes
   (.f-eyebrow, .sec-title, .sec-text).
   ───────────────────────────────────────────────────────────────────────── */
.work{position:relative;isolation:isolate;background:var(--oak-dark);padding:clamp(84px,8.5vw,132px) clamp(24px,7.6vw,140px) clamp(84px,8vw,124px);scroll-margin-top:var(--band-h)}
.work::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(176,141,87,.22)}   /* hairline seam, same as .sgx */

/* Head: eyebrow, title, one line, then a short serif line on the right on desktop */
.work__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,6vw,112px);align-items:end;max-width:1320px;margin:0 auto}
.work__head .sec-text{max-width:32em}
.work__quote{margin:0;padding:4px 0 4px 22px;border-left:1px solid var(--oak-gold)}
.work__quote p{font-family:var(--oak-serif);font-style:italic;font-weight:400;font-size:clamp(22px,1.8vw,27px);line-height:1.35;color:var(--oak-gold-text);text-wrap:balance}

/* The Lounge's bullet list. Same shape as .fplan__list; the colour has to differ because
   this section is on the CREAM ground, where #B08D57 is 2.67:1 and fails. */
.work__list{list-style:none;margin:clamp(16px,1.6vw,22px) 0 0;padding:0;
            font-size:13px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;
            color:var(--oak-gold-deep)}
.work__list li{display:flex;align-items:baseline;gap:12px}
.work__list li+li{margin-top:12px}
.work__list li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
                       background:var(--oak-gold);transform:translateY(-2px)}
.work:not(.work--light) .work__list{color:var(--oak-gold-text)}

/* Wide photo with the brass offset mat (mirrors .sgx__media::before) */
.work__hero{position:relative;max-width:1320px;margin:clamp(48px,5vw,76px) auto 0}
.work__hero::before{content:"";position:absolute;left:-18px;top:18px;right:18px;bottom:-18px;border:1px solid rgba(176,141,87,.55);z-index:0}
.work__hero picture{position:relative;z-index:1;display:block}
.work__hero img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;object-position:50% 55%;filter:saturate(var(--oak-saturate))}
/* SCRIM (Kevin, Oct 12): these five photos were the only ones on the site with no veil over
   them, which is why they read brighter and flatter than every other section. Same ink and
   same saturation as the rest; the cream variant below takes the lighter strength. */
.work__hero picture::after{content:"";position:absolute;inset:0;background:var(--scrim-dark);pointer-events:none}

/* The four items */
.work__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,2.6vw,40px);max-width:1320px;margin:clamp(64px,6vw,96px) auto 0}
.work__item{display:flex;flex-direction:column}
.work__media{position:relative;overflow:hidden;background:#3A3127}
.work__media::after{content:"";position:absolute;inset:0;z-index:1;background:var(--scrim-dark);pointer-events:none}
.work__media img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;filter:saturate(var(--oak-saturate));transition:transform var(--oak-motion-slow) var(--ease),filter var(--oak-motion-slow) var(--ease)}
.work__title{margin-top:22px;padding-top:18px;border-top:1px solid rgba(176,141,87,.4);font-family:var(--oak-serif);font-weight:500;font-size:clamp(26px,2vw,32px);line-height:1.12;letter-spacing:-.008em;color:var(--oak-ground);text-wrap:balance}
.work__text{margin-top:12px;font-size:clamp(15.5px,1.05vw,17px);line-height:1.65;color:rgba(242,238,229,.8);text-wrap:pretty}
@media (hover:hover) and (pointer:fine){
  .work__item:hover .work__media img{transform:scale(1.03);filter:saturate(.9)}
}

/* Members-only line under the grid */

@media (max-width:1100px){
  .work__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(44px,5vw,56px)}
}
@media (max-width:1024px){
  .work__head{grid-template-columns:1fr;row-gap:30px}
  .work__hero img{aspect-ratio:16/9}
}
@media (max-width:700px){
  .work{padding:72px 22px 76px}
  .work__hero{margin-top:40px}
  .work__hero::before{left:-10px;top:10px;right:10px;bottom:-10px}
  .work__hero img{aspect-ratio:4/3}
  .work__grid{grid-template-columns:1fr;row-gap:44px;margin-top:56px}
  .work__title{margin-top:18px;padding-top:14px}
}
@media (prefers-reduced-motion:reduce){ .work__media img{transition:none} }
/* LIGHT VARIANT (Kevin, Oct 11): class="work work--light". Same cream ground and ink as the
   Floor Plan / Access / FAQ sections; brass lines and the photo mat stay as they are. Body
   text is dark ink at 84% (about 6.6:1 on the cream); the gold quote uses the deeper brass
   #8C6C3D the cream sections use for links (large italic text, about 4.3:1). */
.work--light{background:var(--oak-ground)}
.work--light .f-eyebrow{color:var(--oak-gold)}
.work--light .work__title,.work--light /* The merged section header is gold everywhere (Oct 12). On the cream ground that has to be
   the deeper brass: #B08D57 measures only 2.67:1 against #F2EEE5. */
.work--light .sec-title{color:var(--oak-gold-deep)}
/* Lighter veil over the cream ground, so the photos sit on the page instead of going muddy. */
.work--light .work__hero picture::after,.work--light .work__media::after{background:var(--scrim-light)}
.work--light .sec-text,.work--light .work__text{color:rgba(68,59,46,.84)}
.work--light .work--light .work__quote p{color:#8C6C3D}
.work--light .work__media{background:#E6E0D3}
/* ── end WORK SECTION ── */