/* ============================================================================
   THE CRAFTS — homepage section № 03, the house pattern.

   A lighter cousin of the services-page craft accordion (services.css keeps
   the full version): four spreads, one open — a wide text card carrying the
   craft's eyebrow, Fraunces heading, one-line promise, deliverable chips and
   a single deep link — beside a NARROW ink panel with the craft's one cream
   Fraunces-italic word set tall. The rest collapse to titled spines. Same
   grammar as journal-strip.css (the canonical implementation): one curve
   (cubic-bezier(.87,0,.13,1), 1050ms), the panel slides in over the card,
   the copy melts to heading-only, deterministic placement.
   ========================================================================== */

.cstrip{
  --e-suck:cubic-bezier(.87,0,.13,1);   /* slow in, pulled hard, gentle release */
  --c-exp:940px;    /* open spread width  (JS refines per viewport) */
  --c-col:200px;    /* collapsed spine width */
  --c-gap:clamp(12px,1.4vw,20px);
  --c-panel:27%;    /* the narrow ink panel beside the card */
  --c-cream:#F3EAD8;
  max-width:none;
  padding:clamp(64px,9vh,120px) 0 clamp(56px,8vh,100px);
  overflow:hidden;
  outline:none;
}

.cstrip .sec-index{
  max-width:var(--shell);
  margin:0 auto clamp(28px,4vh,44px);
  padding:0 var(--gutter);
}

.cstrip-viewport{position:relative;}

.cstrip-track{
  display:flex;
  gap:var(--c-gap);
  padding-left:var(--gutter);
  will-change:transform;
  transition:transform 1050ms var(--e-suck);
}

/* ---- a spread: one card; the ink panel lives inside it ---- */
.cspread{
  position:relative;
  flex:0 0 auto;
  width:var(--c-col);
  height:clamp(360px,46vh,460px);
  border-radius:clamp(14px,1.4vw,20px);
  overflow:hidden;
  background:
    linear-gradient(135deg, rgba(var(--crgb),.13) 0%, rgba(var(--crgb),.04) 55%, rgba(251,248,243,0) 100%),
    #FFFDF9;
  border:1px solid rgba(var(--crgb),.18);
  transition:width 1050ms var(--e-suck);
  will-change:width;
  cursor:pointer;
}
.cspread.live{width:var(--c-exp);cursor:default;}

/* the ink panel: narrow beside the card when open; slides in to fill the
   spread when it collapses to a spine */
.cterm{
  position:absolute;
  top:0;right:0;bottom:0;
  width:var(--c-panel);
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(130% 120% at 30% 12%, rgba(var(--crgb),.95) 0%, rgba(var(--crgb),.74) 52%, rgba(20,18,31,.92) 100%),
    #14121F;
  transition:width 1050ms var(--e-suck);
  will-change:width;
  z-index:1;
}
.cspread:not(.live) .cterm{width:100%;}

/* the craft's number, folio corner of the panel */
.cterm .cno{
  position:absolute;
  top:clamp(12px,1.8vh,20px);right:clamp(14px,1.6vw,22px);
  font-family:var(--ff-mono);
  font-size:.62rem;letter-spacing:.2em;
  color:rgba(243,234,216,.55);
  white-space:nowrap;
}

/* the ONE word, set tall in cream Fraunces italic */
.cterm .cword{
  font-family:var(--ff-display);
  font-style:italic;font-weight:400;
  font-optical-sizing:auto;font-variation-settings:var(--fx-i);
  font-size:clamp(1.9rem,2.8vw,3rem);
  line-height:1;
  color:var(--c-cream);
  writing-mode:vertical-rl;transform:rotate(180deg);
  text-shadow:0 2px 20px rgba(20,18,31,.35);
  transition:opacity 500ms var(--e-quart) 250ms, font-size 1050ms var(--e-suck);
}
/* on the spine the word dims to a watermark under the craft's name */
.cspread:not(.live) .cterm .cword{opacity:.3;font-size:clamp(2.3rem,3.4vw,3.4rem);}

/* ---- the text card ---- */
.ccard{
  position:relative;
  z-index:2;                    /* eyebrow + heading ride ABOVE the ink panel */
  height:100%;
  display:flex;flex-direction:column;
  padding:clamp(20px,2.4vw,32px);
  padding-right:calc(var(--c-panel) + clamp(18px,1.8vw,30px));
  transition:padding 1050ms var(--e-suck);
}
.cspread:not(.live) .ccard{padding-right:clamp(16px,1.6vw,22px);}

.ceye{
  font-family:var(--ff-mono);
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cink-text,var(--ink));
  margin-bottom:clamp(10px,1.6vh,18px);
}

.cspread h3{
  margin:0;
  font-family:var(--ff-display);
  font-optical-sizing:auto;font-weight:400;
  font-variation-settings:var(--fx-d);
  font-size:clamp(1.85rem,2.7vw,2.6rem);
  line-height:1.04;letter-spacing:-.02em;
  color:var(--ink);
  text-wrap:balance;
  transition:color 700ms var(--e-quart), font-size 1050ms var(--e-suck);
}
/* the spine keeps ONLY the craft's name, in cream on the ink */
.cspread:not(.live) h3{color:var(--c-cream);font-size:clamp(.98rem,1.2vw,1.14rem);line-height:1.2;}

/* the craft's one-line promise, in its own ink */
.ckick{
  margin:clamp(10px,1.6vh,16px) 0 0;
  font-family:var(--ff-display);
  font-style:italic;font-variation-settings:var(--fx-i);
  font-size:clamp(1.08rem,1.5vw,1.4rem);
  line-height:1.32;
  color:var(--cink-text,var(--soft-ink));
}

/* the craft's lede, verbatim from the services page — quiet body text
   under the promise, so the card's middle carries weight */
.clede{
  margin:clamp(12px,1.8vh,18px) 0 0;
  font-family:var(--ff-body);
  font-size:clamp(.98rem,1.2vw,1.12rem);
  line-height:1.55;
  color:var(--soft-ink);
  max-width:48ch;
}

/* deliverable chips — anchored with the link at the card's foot, so the
   whitespace pools mid-card instead of trailing */
.cchips{
  list-style:none;
  display:flex;flex-wrap:wrap;gap:7px;
  margin:auto 0 0;padding-top:clamp(16px,2.4vh,24px);
}
.cchips li{
  font-family:var(--ff-mono);
  font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--soft-ink);
  border:1px solid rgba(20,18,31,.2);border-radius:999px;
  padding:5px 11px;
  white-space:nowrap;
}

/* one link, to the full craft on the services page */
.cfoot{margin-top:0;padding-top:clamp(14px,2vh,20px);}
.clink{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:var(--ff-mono);
  font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid rgba(var(--crgb),.55);
}
.clink .arw{transition:transform 400ms var(--e-quint);}
.clink:hover .arw{transform:translateX(4px);}
.clink:hover{color:var(--cink-text,var(--ink));}

/* everything but the heading melts away on the spine
   (the panel's folio № carries the number there) */
.ceye,.ckick,.clede,.cchips,.cfoot{transition:opacity 450ms var(--e-quart);}
.cspread:not(.live) .ceye,.cspread:not(.live) .ckick,.cspread:not(.live) .clede,
.cspread:not(.live) .cchips,.cspread:not(.live) .cfoot{opacity:0;pointer-events:none;}
.cspread.live .ceye,.cspread.live .ckick,.cspread.live .clede,
.cspread.live .cchips,.cspread.live .cfoot{transition-delay:560ms;}

/* ---- controls: two quiet circles + a progress line in the live ink ---- */
.cstrip-nav{
  max-width:var(--shell);
  margin:clamp(22px,3vh,34px) auto 0;
  padding:0 var(--gutter);
  display:flex;align-items:center;gap:18px;
}
.cbtn{
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(20,18,31,.28);
  background:#FFFDF9;color:var(--ink);font-size:1rem;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .4s var(--e-quart), transform .5s var(--e-expo);
}
.cbtn:hover{border-color:var(--ink);transform:scale(1.06);}
.cbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.cbtn[disabled]{opacity:.3;cursor:default;transform:none;}

.cprog{
  flex:1;max-width:320px;height:2px;border-radius:2px;overflow:hidden;
  background:rgba(20,18,31,.12);
}
.cprog i{
  display:block;height:100%;width:100%;
  background:var(--ink);
  transform-origin:left;transform:scaleX(.25);
  transition:transform 700ms var(--e-quint), background 700ms var(--e-quart);
}
.ccount{
  font-family:var(--ff-mono);
  font-size:.62rem;letter-spacing:.18em;
  color:var(--warm-gray);
  font-variant-numeric:tabular-nums;
}

/* ---- no JS (or script not yet built): a plain list of the four crafts,
        never a blank band. crafts-strip.js adds .built once the strip is
        real, so a failed script leaves the section complete (fail open). */
.cstrip-fallback{
  max-width:var(--shell);margin:0 auto;padding:0 var(--gutter);
  list-style:none;
}
.cstrip-fallback li{border-bottom:1px solid rgba(20,18,31,.14);}
.cstrip-fallback a{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  padding:16px 0;text-decoration:none;color:var(--ink);
}
.cstrip-fallback .fno{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.16em;color:var(--fc,var(--ink));}
.cstrip-fallback .fname{font-family:var(--ff-display);font-size:clamp(1.15rem,1.8vw,1.5rem);letter-spacing:-.01em;}
.cstrip-fallback .fkick{font-family:var(--ff-body);font-style:italic;color:var(--soft-ink);}
.cstrip-fallback a:hover .fname{color:var(--fc,var(--ink));}
.cstrip.built .cstrip-fallback{display:none;}
/* the strip chrome stays out of the way until it is built */
.cstrip:not(.built) .cstrip-viewport,
.cstrip:not(.built) .cstrip-nav{display:none;}

@media(prefers-reduced-motion:reduce){
  .cstrip-track,.cspread,.cterm,.ccard,.cspread h3,.cterm .cword{transition:none !important;}
}

/* ---- ≤820px: the panel drops to a band along the bottom, spines narrow ---- */
@media(max-width:820px){
  .cstrip{--c-col:110px;}
  .cspread{--c-mh:clamp(400px,58vh,500px);height:var(--c-mh);}
  .cterm{top:auto;left:0;right:0;bottom:0;width:100%;height:100%;transition:height 1050ms var(--e-suck);}
  .cspread:not(.live) .cterm{width:100%;height:100%;}
  .cspread.live .cterm{height:clamp(72px,13vh,104px);}
  .cterm .cword{writing-mode:horizontal-tb;transform:none;font-size:clamp(1.4rem,6vw,1.9rem);}
  .cspread:not(.live) .cterm .cword{font-size:clamp(1.8rem,7.6vw,2.4rem);}
  .ccard{
    padding:clamp(18px,4.6vw,24px);
    padding-bottom:calc(clamp(72px,13vh,104px) + 10px);
  }
  /* a safety valve for very short viewports: invisible when the copy fits */
  .cspread.live .ccard{overflow:hidden auto;}
  .cspread:not(.live) .ccard{padding-right:clamp(18px,4.6vw,24px);}
  .cspread h3{font-size:clamp(1.5rem,6.4vw,1.8rem);}
  .cspread:not(.live) h3{font-size:.92rem;}
  .ckick{font-size:1.02rem;}
  .clede{font-size:.92rem;line-height:1.5;}
  .cchips li{font-size:.56rem;padding:4px 9px;}
  .cfoot{padding-top:12px;}
}