/* ==========================================================================
   Phase — industry pages (web-design/<industry>)
   On top of the poster theme (css/home.css) and the location pages' parts
   (css/location.css: the search board, colour cards, checklists, price
   cards, chips; js/location.js stamps the board's rows). What's particular
   to an industry page:
   - a disc in the industry's colour (body.ind--<colour>), the manifesto on it
     with the site's house rules as ink-edged chips
   - the hero's example widget (quote requests, tee times, bookings) as the
     board beside local search
   - six jobs as colour cards; three feature rows, each a photo with an
     example widget on an ink-edged card
   - golf: the site's pages as colour tiles · authors: two sites in the glass
     stage
   ========================================================================== */

body.ind--yellow{--hm-ground:var(--p-yellow)}
body.ind--green{--hm-ground:var(--p-green)}
body.ind--red{--hm-ground:var(--p-red)}
body.ind--pink{--hm-ground:var(--p-pink)}
body.ind--blue{--hm-ground:var(--p-blue)}

/* ==========================================================================
   HERO + MANIFESTO
   ========================================================================== */
.ind-page .hm-sun{--s:clamp(240px,26vw,440px);left:70%;top:40%}
.ind-page .hm-hero h1{max-width:15ch;margin:0 auto;font-size:clamp(2.4rem,5.4vw,5.8rem);letter-spacing:-.05em;line-height:.95}
.ind-page .hm-hero__sub{max-width:38em;color:rgba(10,10,10,.8)}
.ind--blue .hm-manifesto{color:#fff;--fl-ink:#fff;--fl-faint:rgba(255,255,255,.62);--fl-dim:rgba(255,255,255,.8);--fl-line-2:rgba(255,255,255,.3)}
.ind--blue .hm-manifesto .fl-lit-accent .fl-w,
.ind--blue .hm-manifesto .fl-lit-accent:not(:has(.fl-w)){color:var(--p-yellow)}
:is(.ind--red,.ind--green) .hm-manifesto .fl-lit-accent .fl-w,
:is(.ind--red,.ind--green) .hm-manifesto .fl-lit-accent:not(:has(.fl-w)){color:#fff}
.ind-rules{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(36px,4vw,56px)}
.ind-rules li{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 18px 11px 12px;
  border-radius:var(--radius-pill);
  border:2px solid currentColor;
  font-weight:600;
  font-size:.95rem;
}
.ind-rules li::before{
  content:"";
  flex:none;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#0a0a0a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23ffffff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;
}
.ind--blue .ind-rules li::before{background-color:var(--p-yellow);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%230a0a0a' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* ==========================================================================
   THE BOARD — the hero widget, beside local search
   ========================================================================== */
.ind-time{flex:none;min-width:62px;font-family:var(--fl-mono);font-size:.78rem;font-weight:500;letter-spacing:.04em}
.ind-days{display:flex;gap:6px;margin:0 2px 2px}
.ind-day{display:flex;flex-direction:column;align-items:center;flex:1;padding:6px 0 8px;border-radius:12px;font-family:var(--fl-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(10,10,10,.55);background:var(--fl-bg-2)}
.ind-day b{font-family:var(--fl-sans,inherit);font-size:1.05rem;letter-spacing:-.02em;color:#0a0a0a}
.ind-day.is-on{color:#0a0a0a;background:var(--p-yellow)}
.ind-foot{display:flex;align-items:center;gap:10px;margin:4px 4px 2px;font-family:var(--fl-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(10,10,10,.6)}
.ind-foot i{width:9px;height:9px;border-radius:50%;background:var(--p-green);box-shadow:0 0 0 4px rgba(1,186,78,.2)}

/* ==========================================================================
   JOBS (six) + FEATURES
   ========================================================================== */
.ind-jobs__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.ind-jobs .loc-job{min-height:clamp(250px,22vw,300px)}
.ind-jobs .loc-job h3{font-size:clamp(1.5rem,2.2vw,2.1rem)}
.ind-feats{padding:clamp(60px,7vw,100px) 0 clamp(90px,10vw,140px);background:var(--fl-bg);overflow-x:clip}
.ind-feat{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,96px);align-items:center;padding:clamp(40px,5vw,70px) 0}
.ind-feat--rev .ind-feat__media{order:2}
.ind-feat__media{position:relative}
.ind-feat__media::before{content:"";position:absolute;inset:22px -18px -18px 22px;z-index:0;border-radius:32px;background:var(--c);transform:rotate(2.4deg)}
.ind-feat--rev .ind-feat__media::before{inset:22px 22px -18px -18px;transform:rotate(-2.4deg)}
.ind-ph{position:relative;z-index:1;overflow:hidden;aspect-ratio:var(--ar,4/3);border-radius:28px;background:var(--fl-bg-2);box-shadow:0 40px 70px -46px rgba(10,10,10,.6)}
.ind-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.ind-feat__num{display:inline-block;margin-bottom:14px;padding:6px 12px;border-radius:var(--radius-pill);font-family:var(--fl-mono);font-size:.7rem;letter-spacing:.14em;color:#0a0a0a;background:var(--c)}
.ind-feat h3{max-width:16ch;font-size:clamp(1.9rem,3.2vw,3rem);font-weight:600;letter-spacing:-.04em;line-height:1.02}
.ind-feat__text > p{max-width:46ch;margin-top:16px;font-size:1.05rem;line-height:1.65;color:var(--fl-dim)}
/* the example widget on the photo: an ink-edged card */
.ind-feat .ui{
  position:absolute;
  z-index:2;
  min-width:240px;
  padding:16px 18px;
  border:2px solid #0a0a0a;
  border-radius:20px;
  color:#0a0a0a;
  background:var(--fl-surface);
  box-shadow:0 5px 0 #0a0a0a,0 24px 40px -24px rgba(10,10,10,.5);
}
.ind-feat .ui--hole,.ind-feat .ui--form{left:-22px;bottom:26px;transform:rotate(-2deg)}
.ind-feat .ui--rates{right:-22px;bottom:26px;transform:rotate(2deg)}
.ind-feat--rev .ui--hole,.ind-feat--rev .ui--form{left:auto;right:-22px;transform:rotate(2deg)}
.ind-feat--rev .ui--rates{right:auto;left:-22px;transform:rotate(-2deg)}
.ind-feat .ui__sample{position:absolute;right:12px;top:10px;font-family:var(--fl-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(10,10,10,.5)}
.ind-feat .ui__tag{display:inline-block;margin-bottom:8px;padding:4px 9px;border-radius:var(--radius-pill);font-family:var(--fl-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;background:var(--c)}
.ind-feat .ui h4{font-size:1.5rem;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.ind-feat .ui p{margin-top:4px;font-size:.84rem;color:rgba(10,10,10,.65)}
.ind-feat .ui svg{display:block;width:100%;height:36px;margin-top:10px;overflow:visible}
.ind-feat .ui dl{display:grid;gap:7px;margin-top:6px}
.ind-feat .ui dl div{display:flex;justify-content:space-between;gap:24px;padding-bottom:7px;border-bottom:1.5px dashed rgba(10,10,10,.18)}
.ind-feat .ui dl div:last-child{padding:0;border:0}
.ind-feat .ui dt{color:rgba(10,10,10,.7)}
.ind-feat .ui dd{font-weight:700;font-variant-numeric:tabular-nums}
.ind-feat .ui .fld{display:block;margin-top:8px;padding:9px 12px;border-radius:11px;border:1.5px solid rgba(10,10,10,.18);font-size:.8rem;color:rgba(10,10,10,.7);background:#fff}
.ind-feat .ui .go{display:block;margin-top:10px;padding:10px;border-radius:var(--radius-pill);text-align:center;font-weight:700;font-size:.82rem;color:#fff;background:#0a0a0a}

/* ==========================================================================
   GOLF: THE PAGES · AUTHORS: THE SITES
   ========================================================================== */
.ind-pages{padding:clamp(100px,11vw,160px) 0;background:var(--fl-bg-2)}
.ind-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.ind-tile{padding:22px 22px 24px;border-radius:24px;color:#0a0a0a;background:var(--c);box-shadow:0 26px 44px -34px rgba(10,10,10,.55)}
.ind-tile:nth-child(4n+2){transform:rotate(1deg)}
.ind-tile:nth-child(4n+3){transform:rotate(-1deg)}
.ind-tile h3{font-size:1.2rem;font-weight:600;letter-spacing:-.02em}
.ind-tile p{margin-top:6px;font-size:.9rem;line-height:1.5;color:inherit;opacity:.8}
.ind-tile--home{grid-column:span 2;color:#fff;background:#0a0a0a}
.ind-tile--home h3{font-size:1.8rem}
.ind-tile--plus{grid-column:span 3;border:2px dashed #0a0a0a;background:var(--fl-surface);box-shadow:none}
.ind-proof{padding:clamp(100px,11vw,160px) 0;background:var(--fl-bg-2)}
.ind-spots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.ind-spot{margin:0}
.ind-spot figcaption{margin-top:16px;max-width:46ch;font-size:1rem;line-height:1.55;color:var(--fl-dim)}
.ind-spot figcaption strong{color:#0a0a0a}
.ind-spot figcaption a{font-weight:600;color:#0a0a0a;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.ind-proof__more{margin-top:34px;text-align:center}

/* ==========================================================================
   EXPLORE
   ========================================================================== */
.ind-explore{padding:clamp(90px,10vw,140px) 0 clamp(70px,8vw,110px);background:var(--fl-bg-2)}
.ind-explore__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(36px,5vw,80px)}
.ind-explore h3{font-size:clamp(1.6rem,2.4vw,2.2rem);font-weight:600;letter-spacing:-.035em}
.ind-explore__col > p{margin:8px 0 20px;color:var(--fl-dim)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1000px){
  .ind-jobs__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ind-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ind-tile--plus{grid-column:span 2}
}
@media (max-width:900px){
  .ind-feat{grid-template-columns:minmax(0,1fr)}
  .ind-feat--rev .ind-feat__media{order:0}
  .ind-spots{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .ind-page .hm-hero .fl-actions{flex-direction:column;align-items:center}
  .ind-page .hm-hero h1{font-size:clamp(2rem,9.4vw,3rem)}
}
@media (max-width:640px){
  .ind-jobs__grid{grid-template-columns:minmax(0,1fr)}
  .ind-feat .ui{min-width:0;left:10px!important;right:10px!important;bottom:-24px;transform:none!important}
  .ind-feat__media{margin-bottom:60px}
  .ind-tile--home{grid-column:span 2}
}