/* Concept face — the custom build tier.
   Loaded only when a site sets `face = concept`. It overlays site.css rather
   than replacing it, so every shared page (shop, dogs, contact) keeps working
   while the home page renders the designed composition. Colours still come from
   the site's theme, so a face is not tied to one client's palette. */

.face-concept .cf-code,
.face-concept .cf-eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--on-dark-mut);
}
.face-concept .cf-mark{
  display:inline-block; width:26px; height:2px; background:var(--rust);
  vertical-align:middle; margin-right:11px;
}

/* hero ------------------------------------------------------------------- */
.face-concept .cf-hero{
  position:relative; min-height:88vh; display:flex; align-items:flex-end;
  background:var(--marsh); border-bottom:1px solid var(--line); overflow:hidden;
}
.face-concept .cf-hero.has-bg{
  /* Take the photograph but NOT the shared .has-bg gradient — this face paints
     its own two scrims below, and stacking all three renders a black rectangle
     with an invisible photograph behind it. */
  background-image:var(--bg-url);
  background-size:cover; background-position:var(--bg-focus,center); background-repeat:no-repeat;
}
/* Two scrims, not one. A single top-down gradient leaves small mono type sitting
   on whatever the photograph happens to be doing at that height — on the first
   build that was a bright blue vest, and the eyebrow was invisible. */
.face-concept .cf-hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.22) 34%,rgba(0,0,0,.92) 84%);
}
.face-concept .cf-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.50) 44%,rgba(0,0,0,0) 76%);
}
.face-concept .cf-hero-in{ position:relative; z-index:2; width:100%; padding:0 0 52px; }
.face-concept .cf-hero h1{
  font-size:clamp(42px,7.6vw,96px); line-height:.9; letter-spacing:-.028em;
  text-transform:uppercase; margin:16px 0 0; text-wrap:balance;
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}
.face-concept .cf-hero h1 em,
.face-concept .cf-band h2 em,
.face-concept .cf-hd h2 em{
  font-family:var(--display); font-style:italic; font-weight:500;
  text-transform:none; letter-spacing:-.01em; color:var(--wheat);
}
.face-concept .cf-lede{ max-width:56ch; margin-top:18px; font-size:17px; color:var(--on-dark); }
.face-concept .cf-cta{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:26px; }
.face-concept .cf-spec{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; max-width:820px;
  margin-top:32px; padding-top:20px; border-top:1px solid rgba(255,255,255,.18);
}
.face-concept .cf-spec .v{
  display:block; font-family:var(--mono); font-size:14px; color:var(--on-dark); margin-top:5px;
}

/* sections --------------------------------------------------------------- */
.face-concept .cf-sec{ padding:clamp(3.5rem,8vw,6rem) 0; border-bottom:1px solid var(--line); }
.face-concept .cf-sec-alt{ background:var(--marsh-2); }
.face-concept .cf-hd{
  display:grid; grid-template-columns:96px 1fr; gap:22px; align-items:start; margin-bottom:38px;
}
.face-concept .cf-rail{
  font-family:var(--display); font-weight:900; font-size:52px; line-height:1;
  color:var(--marsh-3);
}
.face-concept .cf-hd h2{ font-size:clamp(28px,4.2vw,44px); text-transform:uppercase; letter-spacing:-.028em; }
.face-concept .cf-sub{ margin-top:13px; max-width:72ch; color:var(--on-dark-mut); }

.face-concept .cf-trio{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line);
}
.face-concept .cf-trio>div{ padding:30px 26px 34px; border-right:1px solid var(--line); }
.face-concept .cf-trio>div:last-child{ border-right:0; }
.face-concept .cf-pcode{
  font-family:var(--display); font-weight:900; font-size:26px; color:var(--rust); margin-bottom:16px;
}
.face-concept .cf-trio h3{ font-size:17px; margin-bottom:9px; text-transform:uppercase; }
.face-concept .cf-trio p{ font-size:14.5px; color:var(--on-dark-mut); }

/* band ------------------------------------------------------------------- */
.face-concept .cf-band{
  position:relative; min-height:72vh; display:flex; align-items:flex-end;
  background-image:var(--bg-url);
  background-size:cover; background-position:var(--bg-focus,center); background-repeat:no-repeat;
  border-bottom:1px solid var(--line);
}
.face-concept .cf-band::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.08) 30%,rgba(0,0,0,.90) 86%);
}
.face-concept .cf-band-in{ position:relative; z-index:2; width:100%; padding:0 0 50px; }
.face-concept .cf-band h2{
  font-size:clamp(26px,4.4vw,50px); max-width:18ch; text-transform:uppercase;
  letter-spacing:-.028em; line-height:.94; text-shadow:0 2px 30px rgba(0,0,0,.55);
}

/* product + animal tiles -------------------------------------------------- */
.face-concept .cf-kit,
.face-concept .cf-dogs{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line);
}
.face-concept .cf-item,
.face-concept .cf-dog{
  background:var(--marsh-2); text-decoration:none; color:inherit; display:block;
}
.face-concept .cf-item:hover,
.face-concept .cf-dog:hover{ background:var(--marsh-3); }
.face-concept .cf-shot{
  position:relative; aspect-ratio:1; background:var(--canvas-2); overflow:hidden;
  display:grid; place-items:center;
}
.face-concept .cf-shot img{ width:100%; height:100%; object-fit:cover; }
.face-concept .cf-noimg{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-light-mut);
}
.face-concept .cf-chip{
  position:absolute; top:0; left:0; z-index:2; background:var(--rust); color:var(--on-dark);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  padding:5px 9px; font-weight:700;
}
.face-concept .cf-ibody,
.face-concept .cf-dog h3{ padding:18px 20px 0; }
.face-concept .cf-ibody{ padding-bottom:20px; }
.face-concept .cf-ibody h3,
.face-concept .cf-dog h3{ font-size:15.5px; margin:0 0 8px; text-transform:uppercase; }
.face-concept .cf-ibody p,
.face-concept .cf-dog p{ font-size:13.5px; color:var(--on-dark-mut); margin:0; }
.face-concept .cf-dog p{ padding:0 20px 20px; }
.face-concept .cf-prow{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--mono); font-size:12.5px;
}
.face-concept .cf-prow .amt{ font-size:17px; color:var(--on-dark); }
.face-concept .cf-out{ color:var(--rust); }
.face-concept .cf-more{ margin-top:26px; }

@media (max-width:960px){
  .face-concept .cf-kit,
  .face-concept .cf-dogs,
  .face-concept .cf-spec{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .face-concept .cf-trio{ grid-template-columns:1fr; }
  .face-concept .cf-trio>div{ border-right:0; border-bottom:1px solid var(--line); }
  .face-concept .cf-hd{ grid-template-columns:1fr; }
  .face-concept .cf-rail{ font-size:38px; }
}
@media (max-width:560px){
  .face-concept .cf-kit,
  .face-concept .cf-dogs,
  .face-concept .cf-spec{ grid-template-columns:1fr; }
}

/* Masthead floating over the hero -----------------------------------------
   Only on a page that opts in (cf-overlay, set by the face when a hero photo
   exists). The shared masthead is a solid sticky bar, which pushes the artwork
   down and reads as a website with a picture under it rather than a page that
   opens on a photograph. Lifting it out of flow lets the image run to the top
   edge, the way the concept does. Inner pages keep the solid bar — a
   transparent one over ordinary content would be unreadable. */
.face-concept.cf-overlay .masthead{
  position:absolute; top:0; left:0; right:0; z-index:50;
  background:transparent; border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter:none;
}
/* Type on the bar now sits on the photograph, so it needs its own lift. */
.face-concept.cf-overlay .masthead .brand,
.face-concept.cf-overlay .masthead .nav a{ text-shadow:0 1px 14px rgba(0,0,0,.65); }
.face-concept.cf-overlay .cf-hero{ min-height:100vh; }

/* The collapsed phone menu has nothing behind it once the bar is transparent,
   so give the open panel its own ground or it lands on the photograph. */
@media (max-width:860px){
  .face-concept.cf-overlay .nav.is-open{ background:rgba(8,8,10,.96); }
}

/* Shop not yet taking money — say so where the prices are, not only on /shop. */
.face-concept .cf-preorder{
  margin-top:22px; padding:14px 18px; border-left:2px solid var(--rust);
  background:rgba(255,255,255,.04); color:var(--on-dark); font-size:14.5px;
}