/* =============================================================================
   The Brand Clan - EVENT KITS
   The index and the five kit pages. Loaded after tbc-base.css and tbc-v4.css.
   Generated by scratchpad/build_kits.py, so change the template there too.
   ========================================================================== */

/* =============================================================================
   INDEX  - the five kits as rows. No numbering and no dividing rules: the
   pack plates and the whitespace do the separating, so it reads as a shop
   rather than a magazine contents page. A tall photograph holds the right
   quarter of the section and fades into the paper.
   ========================================================================== */
.v4 .ekindex{position:relative;overflow:hidden;padding-top:clamp(34px,4vw,60px);}

/* the page opens on type rather than a banner photograph, so the column of
   event plates on the right can run from the navbar to the foot of the section
   without meeting another image at a hard horizontal seam */
.v4 .ek-open{max-width:min(100%,1000px);padding-bottom:clamp(28px,3.4vw,46px);
  border-bottom:1px solid var(--rule);margin-bottom:clamp(4px,1vw,10px);}
.v4 .ek-open h1{font-size:clamp(31px,4.4vw,58px);line-height:1.05;letter-spacing:-.016em;
  max-width:16ch;margin-bottom:14px;}
.v4 .ek-open h1 em{color:var(--gold-dp);}
.v4 .ek-sub{font-size:16.5px;max-width:60ch;}
.v4 .crumb.dark{color:var(--body);}
.v4 .crumb.dark a{color:var(--gold-dp);}
.v4 .crumb.dark a:hover{color:var(--ink);}
.v4 .crumb.dark i{color:var(--rule);}
/* The strip runs the full height of the section, so instead of one photograph
   with dead paper under it, it carries a column of event plates, one per kit.
   Each shares the height equally, and a single overlay fades the whole column
   into the paper on its left edge. */
.v4 .ek-media{position:absolute;top:0;bottom:0;right:0;width:min(25vw,340px);
  display:flex;flex-direction:column;gap:10px;}
.v4 .ek-media img{flex:1 1 0;min-height:0;width:100%;height:100%;object-fit:cover;display:block;}
.v4 .ek-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--paper) 0%,rgba(243,240,233,.55) 22%,rgba(243,240,233,0) 64%),
    linear-gradient(180deg,rgba(243,240,233,0) 82%,var(--paper) 100%);}
.v4 .ekindex .shell{position:relative;z-index:1;}

.v4 .kindex{max-width:min(100%,1000px);}
.v4 .kirow{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);
  gap:clamp(20px,3vw,44px);align-items:center;
  padding:clamp(26px,3.4vw,48px) 0;
}
.v4 .kirow:first-child{padding-top:clamp(20px,2.4vw,34px);}
.v4 .kirow:last-child{padding-bottom:0;}
.v4 .kirow + .kirow{border-top:1px solid var(--rule);}
/* the pack renders are 1330x784 on a near-black ground, so the frame matches
   their ratio exactly and nothing is cropped */
.v4 .kirow .im{display:block;overflow:hidden;background:var(--ink);border:1px solid var(--rule);}
.v4 .kirow .im img{width:100%;aspect-ratio:1330/784;object-fit:cover;
  transition:transform .7s cubic-bezier(.16,1,.3,1);}
.v4 .kirow:hover .im img{transform:scale(1.04);}

.v4 .kirow h2{font-size:clamp(24px,2.8vw,36px);line-height:1.1;margin-bottom:7px;}
.v4 .kirow .who{display:block;font-size:10.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-dp);margin-bottom:12px;}
.v4 .kirow p{font-size:15.5px;max-width:52ch;margin-bottom:16px;}
.v4 .kirow .meta{margin-bottom:20px;}
.v4 .kirow .meta .it,
.v4 .kirow .meta .pr{display:block;font-size:15px;color:var(--body);line-height:1.5;}
.v4 .kirow .meta b{font-family:var(--display);font-size:21px;font-weight:400;color:var(--ink);}
@media(max-width:1240px){ .v4 .ek-media{display:none;} }
@media(max-width:860px){
  .v4 .kirow{grid-template-columns:1fr;gap:18px;}
  .v4 .kindex{gap:clamp(34px,7vw,48px);}
}

/* the closing band on the index */
.v4 .kbuild{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,44px);
  align-items:center;margin-top:clamp(34px,4vw,56px);
  padding-top:clamp(26px,3vw,38px);border-top:1px solid var(--rule);}
/* only the kits index narrows it, to line up with the kit rows beside it */
.v4 .ekindex .kbuild{max-width:min(100%,1000px);}
.v4 .kbuild h2{font-size:clamp(24px,2.8vw,36px);margin-bottom:8px;}
.v4 .kbuild h2 em{color:var(--gold-dp);}
.v4 .kbuild p{font-size:15.5px;max-width:56ch;}
@media(max-width:760px){ .v4 .kbuild{grid-template-columns:1fr;} }

/* =============================================================================
   KIT PAGE  - what is included
   ========================================================================== */
.v4 .kgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:start;}
.v4 .kgrid > div:first-child{align-self:stretch;}   /* sticky needs travel */
.v4 .kstick{position:sticky;top:112px;}
/* the render is 1330x784 on near-black, so it becomes a full-width ink plate
   rather than a small picture floating inside a white box */
.v4 .kshot{background:var(--ink);border:1px solid var(--rule);overflow:hidden;}
.v4 .kshot img{width:100%;aspect-ratio:1330/784;object-fit:cover;display:block;}
.v4 .kshot-note{font-size:12.5px;color:var(--body);margin:11px 0 clamp(18px,2vw,24px);}
@media(max-width:1020px){ .v4 .kgrid{grid-template-columns:1fr;} .v4 .kstick{position:static;} }

.v4 .kincl h2{font-size:clamp(24px,2.8vw,34px);margin-bottom:6px;}
.v4 .kincl .sub{font-size:14.5px;margin-bottom:20px;}
.v4 .kitems{list-style:none;border-top:1px solid var(--rule);margin-bottom:clamp(22px,2.6vw,30px);}
.v4 .kitems li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--rule);}
.v4 .kitems .q{font-family:var(--display);font-size:14px;color:var(--gold-dp);min-width:2.2em;}
.v4 .kitems .nm{display:block;color:var(--ink);font-size:15.5px;font-weight:600;}
.v4 .kitems .dim{display:block;color:var(--body);font-size:13.5px;margin-top:2px;}

.v4 .kprice{background:var(--ink);color:#fff;padding:clamp(20px,2.4vw,28px);}
.v4 .kprice .k{font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);}
.v4 .kprice .v{font-family:var(--display);font-size:clamp(30px,3.6vw,44px);color:#fff;line-height:1.1;margin:6px 0 8px;}
.v4 .kprice .s{font-size:13.5px;color:#A9B7C1;max-width:46ch;}

.v4 .kctas{display:grid;grid-template-columns:1fr 1fr;gap:13px;align-items:stretch;
  margin-top:clamp(18px,2.2vw,26px);}
.v4 .kctas .act{width:100%;justify-content:center;text-align:center;padding-left:14px;padding-right:14px;}
.v4 .kctas .note{grid-column:1 / -1;font-size:13px;color:var(--body);margin-top:2px;}
@media(max-width:520px){ .v4 .kctas{grid-template-columns:1fr;} }

/* =============================================================================
   HOW THIS KIT GETS MADE  - the flow on the left, the gallery filling the
   right, which is where the empty half of this section used to be
   ========================================================================== */
.v4 .kmake{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(28px,4vw,60px);align-items:start;}
.v4 .kmake-copy h2{font-size:clamp(24px,2.8vw,38px);margin-bottom:12px;}
.v4 .kmake-copy h2 em{color:var(--gold-dp);}
.v4 .kmake-sub{font-size:16px;max-width:56ch;margin-bottom:clamp(20px,2.4vw,30px);}

.v4 .kgal{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,14px);}
.v4 .kgal figure{overflow:hidden;background:var(--ink);margin:0;}
.v4 .kgal figure:first-child{grid-column:1 / -1;}
.v4 .kgal img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/2;
  transition:transform .8s cubic-bezier(.16,1,.3,1);}
.v4 .kgal figure:first-child img{aspect-ratio:4/3;}
.v4 .kgal figure:hover img{transform:scale(1.04);}
.v4 .kgal-note{font-size:13px;color:var(--body);margin-top:12px;}

.v4 .kgal-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(18px,3vw,40px);
  align-items:center;margin-top:clamp(26px,3vw,40px);padding-top:clamp(22px,2.6vw,32px);
  border-top:1px solid var(--rule);}
.v4 .kgal-foot p{font-size:15px;max-width:58ch;}
@media(max-width:1020px){ .v4 .kmake{grid-template-columns:1fr;} }
@media(max-width:760px){ .v4 .kgal-foot{grid-template-columns:1fr;} }

/* =============================================================================
   ADD-ONS
   ========================================================================== */
.v4 .kao{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);}
.v4 .kao a{display:flex;align-items:center;gap:16px;background:var(--paper-2);
  border:1px solid var(--rule);padding:14px 18px 14px 14px;
  transition:border-color .3s ease,transform .4s cubic-bezier(.16,1,.3,1);}
.v4 .kao a:hover{border-color:var(--gold);transform:translateY(-3px);}
.v4 .kao .im{width:62px;height:62px;flex-shrink:0;background:#fff;border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;padding:5px;}
.v4 .kao .im img{max-width:100%;max-height:100%;object-fit:contain;}
.v4 .kao .nm{display:block;font-family:var(--display);font-size:17px;color:var(--ink);line-height:1.2;}
.v4 .kao .pr{display:block;font-size:12.5px;color:var(--body);margin-top:3px;}
.v4 .kao-foot{margin-top:clamp(20px,2.4vw,30px);}
@media(max-width:860px){ .v4 .kao{grid-template-columns:1fr 1fr;} }
@media(max-width:560px){ .v4 .kao{grid-template-columns:1fr;} }

/* =============================================================================
   FAQS
   ========================================================================== */
.v4 .kfaq{border-top:1px solid var(--rule);max-width:820px;margin:0 auto;}
.v4 .kfaq details{border-bottom:1px solid var(--rule);}
.v4 .kfaq summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;
  padding:17px 0;font-family:var(--display);font-size:clamp(17px,1.7vw,21px);color:var(--ink);
  list-style:none;
}
.v4 .kfaq summary::-webkit-details-marker{display:none;}
.v4 .kfaq summary i{font-size:12px;color:var(--gold-dp);transition:transform .3s ease;flex-shrink:0;}
.v4 .kfaq details[open] summary i{transform:rotate(45deg);}
.v4 .kfaq .ans{font-size:15px;line-height:1.6;padding:0 0 20px;}

/* the "other kits" cards carry the same pack renders */
/* there are always four other kits, so the grid is four wide and the row fills */
.v4 .wcards.packs{grid-template-columns:repeat(4,minmax(0,1fr));}
.v4 .wcards.packs .wc-im{background:var(--ink);}
.v4 .wcards.packs .wc-im img{aspect-ratio:1330/784;}
.v4 .wcards.packs h3{font-size:clamp(17px,1.35vw,20px);}
.v4 .wcards.packs .wc-d{font-size:13.5px;}
@media(max-width:1020px){ .v4 .wcards.packs{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:620px){ .v4 .wcards.packs{grid-template-columns:1fr;} }

/* =============================================================================
   WHAT EACH PIECE DOES  (Elle, 2026-08-18)
   Item against job, so the list of contents above stops being a list of nouns.
   ========================================================================== */
.v4 .kjobs-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:start;}
@media(max-width:1020px){ .v4 .kjobs-grid{grid-template-columns:1fr;} }

.v4 .kjobs{width:100%;border-collapse:collapse;}
.v4 .kjobs thead th{
  text-align:left;font-family:var(--text);font-size:9.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--body);padding:0 0 11px;border-bottom:1px solid var(--rule);
}
.v4 .kjobs tbody th{
  text-align:left;vertical-align:top;padding:15px 22px 15px 0;border-bottom:1px solid var(--rule);
  font-family:var(--display);font-weight:400;font-size:clamp(16px,1.5vw,19px);color:var(--ink);
  line-height:1.25;width:34%;
}
.v4 .kjobs tbody td{
  vertical-align:top;padding:15px 0;border-bottom:1px solid var(--rule);
  font-size:14.5px;line-height:1.6;color:var(--body);
}
@media(max-width:560px){
  .v4 .kjobs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .v4 .kjobs,.v4 .kjobs tbody,.v4 .kjobs tr{display:block;width:100%;}
  .v4 .kjobs tbody th,.v4 .kjobs tbody td{display:block;width:100%;border:0;padding:0;}
  .v4 .kjobs tbody tr{padding:14px 0;border-bottom:1px solid var(--rule);}
  .v4 .kjobs tbody td{margin-top:5px;}
}

/* the reuse note sits beside the table */
.v4 .kreuse{background:var(--paper);border:1px solid var(--rule);
  padding:clamp(22px,2.6vw,32px);}
.v4 .kreuse h2{font-size:clamp(21px,2.1vw,26px);margin-bottom:12px;}
.v4 .kreuse p{font-size:15px;line-height:1.62;margin-bottom:11px;}
.v4 .kreuse p:last-child{margin-bottom:0;}

/* =============================================================================
   PER-KIT CLOSING  - written for each kit rather than one generic sign-off
   ========================================================================== */
.v4 .kclose-in{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(22px,3.4vw,52px);align-items:center;}
.v4 .kclose-in h2{font-size:clamp(25px,3vw,38px);line-height:1.12;margin-bottom:14px;max-width:20ch;}
.v4 .kclose-in p{font-size:15.5px;line-height:1.65;max-width:62ch;margin-bottom:11px;}
.v4 .kclose-in p:last-child{margin-bottom:0;}
.v4 .kclose-acts{display:flex;flex-direction:column;gap:11px;flex-shrink:0;}
@media(max-width:860px){
  .v4 .kclose-in{grid-template-columns:1fr;}
  .v4 .kclose-acts{flex-direction:row;flex-wrap:wrap;}
}

/* the price now reads "GBP X + VAT" */
.v4 .kprice .v small{font-family:var(--text);font-size:15px;color:var(--gold);letter-spacing:.02em;}