/* ---------------------------------------------------------------------------
   The home page, 2026-10-04 — peetz's mockup. A night band carries the name
   in big type and the hero picture, which crosses into the bone band below it
   like a print laid over two sheets; then featured work, the big moving list
   of what it renders, how it works (night) and contact (bone).

   The parts every page shares — the header, the big word (.kx), labels,
   arrows — are in site.css; motion is in site.js and home.js.
   Everything here is scoped under #view-home .hx, which outranks the older
   #view-home rules still in styles.css.
   --------------------------------------------------------------------------- */
#view-home{background:var(--bone);background-image:none;color:var(--ink);}
#view-home .hx{
  --hx-over:calc(clamp(40px,6.5vw,104px) + 54px);
  color:var(--ink);font-family:var(--sans);overflow-x:clip;
}
/* several blocks here set display:flex/grid, which would beat the plain
   [hidden] rule and show sections that have nothing in them */
#view-home .hx [hidden]{display:none !important;}

/* ---- the night band: header, the name, the hero ---- */
#view-home .hx-top{position:relative;background:var(--night);color:var(--chalk);}
#view-home .hx-word{position:relative;z-index:1;padding-left:var(--sx-gut);padding-right:var(--sx-gut);margin-top:clamp(0px,1vw,14px);}

#view-home .hx-hero{
  position:relative;display:grid;
  grid-template-columns:minmax(190px,1fr) minmax(0,3.3fr) minmax(130px,.85fr);
  grid-template-areas:"copy stage side";
  gap:clamp(20px,3vw,48px);padding:0 var(--sx-gut);
  /* the picture's top edge sits on the foot of the letters, as in the mockup */
  margin-top:calc(-1 * clamp(0px,1.1vw,16px));
}
#view-home .hx-copy{grid-area:copy;align-self:start;padding-top:clamp(40px,6vw,96px);min-width:0;}
#view-home .hx-kicker{margin:0 0 24px;font:400 clamp(13px,1.15vw,17px)/1.5 var(--label);letter-spacing:.22em;text-transform:uppercase;}
#view-home .hx-kicker span{display:block;}
#view-home .hx-copy .sx-rule{margin:0 0 22px;opacity:.8;}
#view-home .hx-lede{margin:0;max-width:30ch;font-size:13.5px;line-height:1.7;color:rgba(241,240,236,.74);}
#view-home .hx-side{grid-area:side;align-self:end;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:22px;padding-bottom:clamp(20px,2.4vw,34px);text-align:right;}
#view-home .hx-note{margin:0;font:400 8.5px/1.9 var(--label);letter-spacing:.22em;text-transform:uppercase;color:var(--ash);}

/* the hero picture: model and render on one frame, a hairline between. It
   hangs over the bone band below by --hx-over. */
#view-home .hx-stage{grid-area:stage;position:relative;z-index:2;margin:0 0 calc(-1 * var(--hx-over));min-width:0;}
#view-home .hx.solo .hx-hero{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"copy side";}
#view-home .hm-frame{
  /* width and height are set by home.js from the picture's own proportions,
     and glide when the next picture has different ones */
  position:relative;aspect-ratio:16/9;width:100%;margin:0 auto;
  transition:width .9s cubic-bezier(.65,0,.25,1),height .9s cubic-bezier(.65,0,.25,1);
  background:var(--night-2);cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  --p:0%;
}
#view-home .hm-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transition:opacity .5s ease;}
#view-home .hm-before{clip-path:inset(0 calc(100% - var(--p)) 0 0);}
#view-home .hm-frame.swap img{opacity:0;}
#view-home .hm-handle{position:absolute;top:0;bottom:0;left:var(--p);width:0;z-index:3;pointer-events:none;}
#view-home .hm-handle::before{content:"";position:absolute;top:0;bottom:0;left:-.5px;width:1px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.2);}
#view-home .hm-handle i{position:absolute;top:50%;left:0;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;
  background:rgba(241,240,236,.94);box-shadow:0 1px 8px rgba(0,0,0,.25);display:grid;place-items:center;}
#view-home .hm-handle i::before{content:"‹ ›";font:500 13px/1 var(--sans);color:var(--ink);letter-spacing:2px;}
#view-home .hm-tag{position:absolute;top:14px;z-index:4;pointer-events:none;padding:7px 11px;
  font:400 8px/1 var(--label);letter-spacing:.22em;text-transform:uppercase;color:var(--chalk);background:rgba(17,18,19,.8);transition:opacity .3s;}
#view-home .hm-tag-l{left:14px;}
#view-home .hm-tag-r{right:14px;}
#view-home .hm-frame[data-side="photo"] .hm-tag-l,
#view-home .hm-frame[data-side="model"] .hm-tag-r{opacity:0;}
/* the glass plane from the mockup: a sheet of light laid over the picture's
   right half, running on past its edge; site.js lets it drift on scroll */
#view-home .hx-glass{position:absolute;z-index:2;top:13%;right:-9%;width:46%;height:87%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));
  border-left:1px solid rgba(255,255,255,.2);border-top:1px solid rgba(255,255,255,.1);}
/* the shutter the picture opens from as the page arrives */
#view-home .hm-frame::after{content:"";position:absolute;inset:0;z-index:5;background:var(--night);transform:scaleY(0);transform-origin:50% 0;pointer-events:none;}
#view-home .hm-dim{display:flex;align-items:center;gap:16px;margin-top:18px;color:var(--ink-soft);
  font:400 8.5px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;}
#view-home .hm-dim-text{display:flex;gap:16px;white-space:nowrap;font-variant-numeric:tabular-nums;}
#view-home .hm-dim-text #hmIdx{color:var(--ink);}
#view-home .hm-dim-line{flex:1;height:1px;background:var(--hair-strong);min-width:24px;}
#view-home .hm-arrows{display:flex;gap:4px;}
#view-home .hm-arrows button{width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid var(--hair-strong);border-radius:50%;
  background:transparent;color:var(--ink);cursor:pointer;transition:background-color .25s,color .25s,border-color .25s;}
#view-home .hm-arrows button:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);}

/* ---- featured work (bone) ---- */
#view-home .hx-feat{
  border-bottom:1px solid var(--hair-strong);
  display:grid;grid-template-columns:minmax(210px,1.05fr) minmax(0,2.6fr) minmax(180px,.85fr);
  grid-template-areas:"copy cards panel";gap:clamp(22px,3vw,48px);
  padding:calc(var(--hx-over) + clamp(30px,3.6vw,54px)) var(--sx-gut) clamp(48px,6vw,92px);
}
#view-home .hx.solo .hx-feat{padding-top:clamp(48px,6vw,92px);}
#view-home .hx-feat-copy{grid-area:copy;}
#view-home .hx-feat-copy .sx-label{display:flex;gap:16px;color:var(--ink-faint);margin-bottom:18px;}
#view-home .hx-feat-copy .sx-label b{font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums;}
#view-home .hx-h{margin:0 0 20px;font:400 clamp(20px,2.1vw,31px)/1.3 var(--label);letter-spacing:.12em;text-transform:uppercase;}
#view-home .hx-p{margin:0 0 30px;max-width:40ch;font-size:13.5px;line-height:1.7;color:var(--ink-soft);}
/* the featured work drifts as one looping row (sxDrift), each picture at its
   own proportions */
#view-home .hx-cards{grid-area:cards;min-width:0;align-self:start;}
#view-home .hx-cards .sx-drift{--drift-gap:clamp(12px,1.4vw,20px);}
#view-home .hx-card{flex:none;}
/* the words under a picture never make its card wider than the picture */
#view-home .hx-card > :not(.hx-card-pic){width:0;min-width:100%;}
#view-home .hx-card-pic{height:clamp(150px,13vw,210px);aspect-ratio:var(--ar,3/2) !important;}
#view-home .hx-trust{grid-column:1 / -1;}
#view-home .hx-trust .logos-head{margin-top:clamp(24px,3vw,44px);}
#view-home .hx-card{display:flex;flex-direction:column;color:var(--ink);text-decoration:none;min-width:0;}
#view-home .hx-card-pic{position:relative;display:block;overflow:hidden;background:var(--paper-sunk);}
#view-home .hx-card-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--sx-ease);}
#view-home .hx-card:hover .hx-card-pic img{transform:scale(1.05);}
#view-home .hx-card-cat{margin-top:14px;font:400 7.5px/1.4 var(--label);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);}
#view-home .hx-card-n{margin-top:4px;font:400 7.5px/1.4 var(--label);letter-spacing:.2em;color:var(--ink-faint);}
#view-home .hx-card-t{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding-top:10px;border-top:1px solid var(--hair-strong);
  font:400 9.5px/1.4 var(--label);letter-spacing:.16em;text-transform:uppercase;}
#view-home .hx-card-t b{font-weight:400;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#view-home .hx-card:hover .sx-arrow{transform:translateX(5px);}
#view-home .hx-panel{grid-area:panel;display:flex;flex-direction:column;gap:22px;min-height:100%;padding:clamp(22px,2.2vw,32px);
  background:var(--night);color:var(--chalk);text-decoration:none;position:relative;overflow:hidden;}
#view-home .hx-panel .sx-rule{opacity:.8;}
#view-home .hx-panel-t{font:400 clamp(11px,1vw,13px)/1.9 var(--label);letter-spacing:.2em;text-transform:uppercase;}
#view-home .hx-panel-mark{margin-top:auto;width:38px;height:auto;display:block;}
/* a slow diagonal of light crosses the panel on hover */
#view-home .hx-panel::after{content:"";position:absolute;inset:-40% -60%;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.07) 50%,transparent 58%);transform:translateX(-60%);transition:transform 1.4s var(--sx-ease);}
#view-home .hx-panel:hover::after{transform:translateX(60%);}

/* ---- how it works (night) ---- */
#view-home .hx-about{background:var(--night);color:var(--chalk);padding:clamp(60px,7.5vw,120px) var(--sx-gut) clamp(60px,7vw,110px);}
#view-home .hx-about > .sx-label,#view-home .hx-contact > .sx-label{margin-bottom:clamp(16px,2vw,26px);}
#view-home .hx-about > .sx-label{color:var(--ash);}
#view-home .hx-sec-word{margin-bottom:clamp(30px,4vw,60px);}
#view-home .hx-steps-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:16px;margin-bottom:clamp(30px,3.6vw,54px);border-top:1px solid var(--line-d);
  font:400 8.5px/1.5 var(--label);letter-spacing:.22em;text-transform:uppercase;color:var(--ash);}
#view-home .hx-steps-head a{display:inline-flex;align-items:center;gap:12px;color:var(--chalk);text-decoration:none;}
#view-home .hx-steps-head a:hover .sx-arrow{transform:translateX(5px);}
#view-home .hx-about .hm-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.4vw,56px);margin:0;}
#view-home .hx-about .hm-step{position:relative;}
#view-home .hx-about .hm-step-n{display:block;margin-bottom:18px;color:transparent;-webkit-text-stroke:1px var(--chalk);
  font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 150,"wght" 900;font-size:clamp(60px,7vw,112px);line-height:.85;letter-spacing:-.04em;
  transition:color .5s var(--sx-ease);}
#view-home .hx-about .hm-step:hover .hm-step-n{color:var(--chalk);}
#view-home .hx-about .hm-step svg{display:block;width:34px;height:34px;margin-bottom:18px;fill:none;stroke:var(--chalk);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;opacity:.85;}
#view-home .hx-about .hm-step h4{margin:0 0 10px;font:400 11.5px/1.5 var(--label);letter-spacing:.18em;text-transform:uppercase;}
#view-home .hx-about .hm-step p{margin:0;max-width:36ch;font-size:14px;line-height:1.7;color:rgba(241,240,236,.66);}
/* published "howto" rows replace the three steps (fillSection in app.js) */
#view-home .hx-about .step{border:0;padding:0;background:none;color:inherit;}
#view-home .hx-about .step img,#view-home .hx-about .step .ph{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:16px;background:var(--night-2);}
#view-home .hx-about .step .step-n{font:400 8.5px/1 var(--label);letter-spacing:.22em;color:var(--ash);margin-bottom:10px;}
#view-home .hx-about .step h4{margin:0 0 8px;font:400 11.5px/1.5 var(--label);letter-spacing:.18em;text-transform:uppercase;}
#view-home .hx-about .step p{margin:0;font-size:14px;line-height:1.7;color:rgba(241,240,236,.66);}
#view-home .hx-feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(56px,7vw,110px);border-top:1px solid var(--line-d);}
#view-home .hx-feats .hm-feat{padding:22px clamp(14px,1.8vw,28px) 6px 0;border-right:1px solid var(--line-d);}
#view-home .hx-feats .hm-feat + .hm-feat{padding-left:clamp(14px,1.8vw,28px);}
#view-home .hx-feats .hm-feat:last-child{border-right:0;}
#view-home .hx-feats h4{margin:0 0 10px;font:400 10px/1.5 var(--label);letter-spacing:.16em;text-transform:uppercase;}
#view-home .hx-feats p{margin:0;font-size:13.5px;line-height:1.65;color:rgba(241,240,236,.62);}
#view-home .hx-about .hm-sec-head{margin:clamp(48px,6vw,90px) 0 24px;padding-top:16px;border-top:1px solid var(--line-d);}
#view-home .hx-about .hm-sec-head h3{margin:0;font:400 11px/1.5 var(--label);letter-spacing:.2em;text-transform:uppercase;}
#view-home .hx-about .usecases,#view-home .hx-about .voices{color:inherit;}

/* ---- plugins (bone): the reel on the left, the plugins on the right ---- */
#view-home .hx-plug{padding:clamp(60px,7.5vw,120px) var(--sx-gut) 0;}
#view-home .hx-plug > .sx-label{color:var(--ink-faint);margin-bottom:clamp(16px,2vw,26px);}
#view-home .hx-plug-row{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(240px,1fr);gap:clamp(24px,3.5vw,56px);align-items:end;}
#view-home .hx-reel{margin:0;min-width:0;}
#view-home .hx-reel canvas{display:block;width:100%;aspect-ratio:16/9;background:var(--night);}
#view-home .hx-reel-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:1px;background:var(--hair-strong);}
@media (max-width:560px){#view-home .hx-reel-bar button{padding:12px 8px;gap:6px;letter-spacing:.14em;}}
#view-home .hx-reel-bar button{--p:0;position:relative;display:flex;align-items:center;gap:12px;padding:14px 16px;border:0;background:var(--bone);cursor:pointer;
  font:400 9.5px/1 var(--label);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);text-align:left;}
#view-home .hx-reel-bar button span{color:var(--ink-faint);}
#view-home .hx-reel-bar button::after{content:"";position:absolute;left:0;top:0;height:2px;width:calc(var(--p) * 100%);background:var(--ink);}
#view-home .hx-reel-bar button.on,#view-home .hx-reel-bar button:hover{color:var(--ink);}
#view-home .hx-reel-bar button:focus-visible{outline:1px solid var(--ink);outline-offset:-1px;}
#view-home .hx-plug-side{display:flex;flex-direction:column;gap:26px;padding-bottom:6px;}
#view-home .hx-plug-tag{margin:0;font:400 9.5px/1.5 var(--label);letter-spacing:.22em;text-transform:uppercase;color:var(--ink);}
#view-home .hx-plug-item{padding-top:16px;border-top:1px solid var(--ink);}
#view-home .hx-plug-item h3{margin:0 0 8px;font:600 15px/1.3 var(--sans,'IBM Plex Sans'),sans-serif;color:var(--ink);}
#view-home .hx-plug-item p{margin:0;max-width:40ch;font-size:14px;line-height:1.6;color:var(--ink-soft);}
#view-home .hx-plug-side .sx-btn{align-self:flex-start;}
@media (max-width:1100px){
  #view-home .hx-plug-row{grid-template-columns:minmax(0,1fr);align-items:start;}
  #view-home .hx-plug-side{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px;}
  #view-home .hx-plug-tag,#view-home .hx-plug-side .sx-btn{grid-column:1/-1;}
}
@media (max-width:700px){
  #view-home .hx-reel{margin:0 calc(-1 * var(--sx-gut));}
  #view-home .hx-plug-side{grid-template-columns:minmax(0,1fr);}
}

/* ---- contact (bone) ---- */
#view-home .hx-contact{padding:clamp(60px,7.5vw,120px) var(--sx-gut) clamp(44px,5vw,76px);}
#view-home .hx-contact > .sx-label{color:var(--ink-faint);}
#view-home .hx-contact-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--ink);}
#view-home .hx-contact-p{margin:0;max-width:44ch;font-size:15px;line-height:1.65;color:var(--ink-soft);}
#view-home .hx-contact-act{display:flex;align-items:center;gap:28px;flex-wrap:wrap;}
#view-home .hx-mail{color:var(--ink);text-decoration:none;font:400 9.5px/1 var(--label);letter-spacing:.14em;border-bottom:1px solid var(--hair-strong);padding-bottom:6px;}
#view-home .hx-mail:hover{border-color:var(--ink);}
#view-home .logos-head{margin-top:clamp(48px,6vw,80px);font:400 8.5px/1 var(--label);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);text-align:left;}
#view-home .hx .marquee.logos{height:auto;margin-top:22px;}

/* ---- footer ---- */
#view-home .hx-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 var(--sx-gut);padding:22px 0 34px;border-top:1px solid var(--hair-strong);
  text-align:left;font-size:12.5px;color:var(--ink-faint);}
#view-home .hx-foot svg{height:15px;width:auto;color:var(--ink);}
#view-home .hx-foot nav{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap;}
#view-home .hx-foot nav a{margin:0;color:var(--ink-soft);text-decoration:none;font:400 8.5px/1.6 var(--label);letter-spacing:.18em;text-transform:uppercase;}
#view-home .hx-foot nav a:hover{color:var(--ink);}

/* ---- arrival: site.js adds .sx-enter to the view when it is shown ---- */
#view-home.sx-enter .hx-kicker span{animation:hxUp 1s var(--sx-ease) both;}
#view-home.sx-enter .hx-kicker span:nth-child(2){animation-delay:.08s;}
#view-home.sx-enter .hx-kicker span:nth-child(3){animation-delay:.16s;}
#view-home.sx-enter .hx-copy .sx-rule{animation:hxRule 1s .3s var(--sx-ease) both;}
#view-home.sx-enter .hx-lede,#view-home.sx-enter .hx-side{animation:hxUp 1.1s .38s var(--sx-ease) both;}
#view-home.sx-enter .hm-frame::after{animation:hxShutter 1.25s .2s cubic-bezier(.77,0,.18,1) both;}
#view-home.sx-enter .hx-glass{animation:hxGlass 1.4s .7s var(--sx-ease) both;}
#view-home.sx-enter .hm-dim{animation:hxUp 1s .9s var(--sx-ease) both;}
@keyframes hxUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
@keyframes hxRule{from{transform:scaleX(0);transform-origin:left;}to{transform:scaleX(1);transform-origin:left;}}
@keyframes hxShutter{from{transform:scaleY(1);}to{transform:scaleY(0);}}
@keyframes hxGlass{from{opacity:0;transform:translateX(14%);}to{opacity:1;transform:none;}}

@media (prefers-reduced-motion: reduce){
  #view-home .hx *,#view-home .hx *::before,#view-home .hx *::after{animation:none !important;transition:none !important;}
}

/* ---- tablet ---- */
@media (max-width:1100px){
  #view-home .hx-hero{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"copy side" "stage stage";}
  #view-home .hx-copy{padding-top:6px;}
  #view-home .hx-kicker span{display:inline;}
  #view-home .hx-side{padding-bottom:4px;}
  #view-home .hx-feat{grid-template-columns:minmax(0,1.4fr) minmax(200px,1fr);grid-template-areas:"copy panel" "cards cards";}
  #view-home .hx-feats{grid-template-columns:repeat(2,minmax(0,1fr));}
  #view-home .hx-feats .hm-feat{padding:22px 20px 20px 0;border-right:0;border-bottom:1px solid var(--line-d);}
  #view-home .hx-feats .hm-feat + .hm-feat{padding-left:0;}
}
/* ---- phone ---- */
@media (max-width:700px){
  #view-home .hx{--hx-over:calc(28px + 54px);}
  #view-home .hx-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "side" "stage";gap:22px;margin-top:0;padding-top:18px;}
  #view-home .hx-copy{padding-top:0;}
  #view-home .hx-side{flex-direction:row;justify-self:stretch;justify-content:space-between;align-items:center;text-align:left;}
  #view-home .hx-kicker{font-size:14px;margin-bottom:18px;}
  #view-home .hx-glass{display:none;}
  #view-home .hx-feat{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "cards" "panel";}
  #view-home .hx-cards{margin:0 calc(-1 * var(--sx-gut));}
  #view-home .hx-panel{min-height:200px;}
  #view-home .hx-about .hm-steps{grid-template-columns:minmax(0,1fr);gap:44px;}
  #view-home .hx-feats{grid-template-columns:minmax(0,1fr);}
  #view-home .hx-foot nav{margin-left:0;width:100%;}
  #view-home .hm-tag{top:8px;padding:6px 8px;}
  #view-home .hm-tag-l{left:8px;} #view-home .hm-tag-r{right:8px;}
}
#view-home .hx-plug-how{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-faint);}
@media (max-width:1100px){#view-home .hx-plug-how{grid-column:1/-1;}}