/* Experiment 04 / Living Type
   All photographic mosaics are composed from Aviv Ebbo's recovered WebP art.
   A canvas-generated alpha stencil turns each category title into a photo collage. */
body[data-experiment="4"]{background:#faf8f5}
.type-hero{min-height:450px;padding-top:43px;padding-bottom:88px;background:
 radial-gradient(ellipse at 88% 70%,#eceddf 0%,transparent 43%),
 linear-gradient(120deg,#f4efe7,#f5e8e7 61%,#edf1ec 100%)}
.type-hero-grid{display:grid;grid-template-columns:1.24fr .76fr;align-items:end;gap:45px;margin-top:58px}
.type-hero h1{font-size:clamp(78px,9vw,155px);margin:16px 0 0;line-height:.92}
.type-hero h1 em{color:#a57977}
.type-intro{padding-bottom:11px}
.type-intro>p{font-size:clamp(16px,1.5vw,21px);line-height:1.68;max-width:460px;color:#69726c}
.type-intro>span{display:inline-flex;align-items:center;font-size:11px;letter-spacing:.13em;color:#7a847c;font-weight:700;margin-top:15px}
.type-studio{padding-top:78px;padding-bottom:130px}
.type-intro-row{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:19px}
.type-intro-row>span{font-size:11px;color:#b57e70;font-weight:700;letter-spacing:.16em}
.type-intro-row p{font-size:13px;color:#8b9189;margin:0}
.type-ideas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:24px}
.type-ideas button{
 appearance:none;min-height:80px;border:1px solid #dcd8d2;background:#fdfcfa;padding:19px 19px;
 display:flex;justify-content:space-between;gap:10px;align-items:center;text-align:left;
 font-size:clamp(14px,1.35vw,19px);font-weight:600;letter-spacing:-.025em;
 color:#435149;transition:background .25s,border-color .25s,transform .3s,color .25s
}
.type-ideas button span{font:700 10px "DM Sans",Arial,sans-serif;color:#a6aa9f;letter-spacing:.12em}
.type-ideas button:hover{transform:translateY(-3px);background:#f2ebe8;border-color:#b2a79a}
.type-ideas button.active,.type-ideas button:focus-visible{
 background:#293f35;color:#fbfaf6;border-color:#293f35
}
.type-ideas button.active span{color:#c8dacc}
.type-stage{
 min-width:0;overflow:hidden;background:linear-gradient(145deg,#f8f2e9,#e7ede3);
 border:1px solid #dedcd3;
 box-shadow:0 15px 48px #3d453e17
}
.type-stage-top,.type-stage-bottom{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:19px clamp(16px,3vw,48px)}
.type-stage-top{font-size:10px;font-weight:700;letter-spacing:.14em;color:#849286;border-bottom:1px solid #bfcabc55}
.type-stage-top .exp-live-dot{height:7px;width:7px}
.type-stage-top span:last-child{color:#a97873}
.type-mosaic-wrap{
 position:relative;width:100%;aspect-ratio:1.94;overflow:hidden;background:
 radial-gradient(ellipse at center,#e6e8da 0%,#eee9de 65%,#f3eee6 100%);
 isolation:isolate
}
.type-mosaic-wrap:after{content:"";position:absolute;inset:2.4%;border:1px solid #96a59638;pointer-events:none;z-index:3}
.type-ghost-text{
 position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
 justify-content:center;text-align:center;letter-spacing:-.08em;color:#a7b3a383;
 font-size:clamp(53px,10vw,142px);line-height:.98;font-weight:700;pointer-events:none;
 white-space:normal;user-select:none
}
.type-mask-layer{
 position:absolute;inset:0;display:grid;grid-template-columns:repeat(14,minmax(0,1fr));
 grid-template-rows:repeat(7,minmax(0,1fr));gap:0;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
 -webkit-mask-position:center;mask-position:center;
 -webkit-mask-size:100% 100%;mask-size:100% 100%;
 z-index:2;opacity:1;transition:opacity .28s ease;
}
.type-mask-layer.is-updating{opacity:.42}
.type-photo-tile,.type-filler-tile{
 position:relative;min-width:0;min-height:0;overflow:hidden;
 background:#f6f1e9;
 border:1px solid #ffffff99;
 display:flex;align-items:center;justify-content:center;
 transform:rotate(var(--tilt,0deg)) scale(1.10);
 transform-origin:center;
}
.type-photo-tile img{display:block;object-fit:cover;width:100%;height:100%;filter:saturate(.93) contrast(1.06)}
.type-filler-tile{background:var(--tile-color,#b9c9b0);color:#26362c;flex-direction:column;gap:5px;
 padding:3px;font-weight:700}
.type-filler-tile strong{font-size:clamp(7px,1.05vw,13px);line-height:.98;text-align:center;letter-spacing:-.05em}
.type-filler-tile small{font-size:clamp(5px,.55vw,9px);letter-spacing:.13em;opacity:.67}
.type-photo-tile:nth-child(5n+1),.type-filler-tile:nth-child(5n+1){--float-time:12s}
.type-photo-tile:nth-child(5n+2),.type-filler-tile:nth-child(5n+2){--float-time:16s}
.type-photo-tile:nth-child(5n+3),.type-filler-tile:nth-child(5n+3){--float-time:13s}
.type-photo-tile:nth-child(5n+4),.type-filler-tile:nth-child(5n+4){--float-time:18s}
@keyframes type-tilt{
 0%,100%{transform:rotate(var(--tilt,0deg)) scale(1.10)}
 50%{transform:rotate(calc(var(--tilt,0deg) + 1.45deg)) scale(1.125)}
}
@media(prefers-reduced-motion:no-preference){
 .type-photo-tile,.type-filler-tile{animation:type-tilt var(--float-time,14s) ease-in-out infinite alternate;
 animation-delay:var(--delay,0s)}
}
.type-stage-bottom{border-top:1px solid #d7dbd06b;font-size:13px;color:#777f76}
.type-stage-bottom p{margin:0;max-width:620px;line-height:1.6}
.type-stage-bottom button{appearance:none;border:1px solid #aebeb2;color:#2e4936;
 padding:11px 17px;background:transparent;flex:none;font-size:11px;font-weight:700;letter-spacing:.08em}
.type-stage-bottom button:hover{background:#e3ede4}
.type-explanation{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;padding-top:54px}
.type-explanation>div{border-top:1px solid #cdd5c8;padding-top:22px}
.type-explanation>div>span{font-size:10px;letter-spacing:.14em;color:#ad8176;font-weight:700}
.type-explanation h2{font-size:clamp(23px,2.3vw,36px);margin:15px 0 14px;line-height:1.15}
.type-explanation p{color:#778078;line-height:1.7;font-size:14px;max-width:320px}
.exp-next-four{background:linear-gradient(105deg,#e7eee2,#f2e6e8)}
.experiments-hub-card:nth-child(4){background:#e9e8de}
.hub-type-visual>div{display:flex;align-items:center;justify-content:center;gap:0;position:relative;width:100%;height:100%}
.hub-type-heading{position:absolute;font-size:clamp(100px,14vw,230px);font-weight:700;color:#9eab9b33;
 line-height:1;letter-spacing:-.06em}
.experiments-hub-card:nth-child(4) .hub-type-visual img{
 position:relative;z-index:1;width:29%;height:52%;object-fit:contain;padding:7px;background:#fffdf8;
 transform:rotate(-7deg);box-shadow:0 9px 23px #243c3030
}
.experiments-hub-card:nth-child(4) .hub-type-visual img:nth-of-type(2){transform:translate(-7px,10px) rotate(8deg)}
.experiments-hub-card:nth-child(4) .hub-type-visual img:nth-of-type(3){transform:translate(-20px,-4px) rotate(-3deg)}
@media(max-width:950px){
 .type-hero-grid{grid-template-columns:1fr 1fr}
 .type-hero h1{font-size:clamp(70px,10vw,120px)}
 .type-ideas button{min-height:70px}
}
@media(max-width:760px){
 .type-hero{min-height:0;padding-top:25px;padding-bottom:62px}
 .type-hero-grid{display:block;margin-top:45px}
 .type-hero h1{font-size:clamp(66px,14vw,102px)}
 .type-intro{padding-top:31px}
 .type-intro>p{font-size:15px}
 .type-studio{padding-top:51px;padding-bottom:78px}
 .type-intro-row{display:block}
 .type-intro-row p{margin-top:8px}
 .type-ideas{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:16px}
 .type-ideas button{padding:11px;font-size:12px;min-height:58px;line-height:1.25}
 .type-ideas button span{font-size:9px}
 .type-stage-top,.type-stage-bottom{padding:12px 13px}
 .type-stage-top{font-size:8px;letter-spacing:.08em}
 .type-mosaic-wrap{aspect-ratio:1.55}
 .type-ghost-text{font-size:clamp(40px,9vw,80px)}
 .type-filler-tile strong{font-size:7px}
 .type-stage-bottom p{font-size:11px}
 .type-stage-bottom button{padding:10px;font-size:10px}
 .type-explanation{grid-template-columns:1fr;gap:12px;padding-top:31px}
 .type-explanation h2{font-size:27px}
}
@media(max-width:390px){
 .type-ideas button{font-size:11px}
 .type-stage-top span:first-child{font-size:7px}
 .type-stage-bottom{display:block}
 .type-stage-bottom button{margin-top:9px}
 .type-mosaic-wrap{aspect-ratio:1.4}
}
@media(prefers-reduced-motion:reduce){
 .type-photo-tile,.type-filler-tile{animation:none!important;transition:none!important}
 .type-mask-layer{transition:none!important}
}
/* The headline behind the collage is a no-JS fallback, not a second outline.
   Once the photographic letters render, suppress duplicate faint lettering. */
.type-mosaic-wrap.has-mask .type-ghost-text{opacity:0}


/* Moving photo tiles are visible as an unmasked, scattered artwork cloud.
   The mask fades in only near the end of real position-based assembly. */
.type-mask-layer.is-assembling{opacity:1;transition:none;will-change:contents}
.type-mask-layer.is-assembling .type-photo-tile,
.type-mask-layer.is-assembling .type-filler-tile{
 animation:none!important;
 will-change:transform,opacity
}
.type-mosaic-wrap:not(.has-mask) .type-ghost-text{opacity:.18;transition:opacity .35s}
.type-mosaic-wrap.has-mask .type-ghost-text{opacity:0}
.type-stage-bottom #type-remix{min-width:160px}
@media(prefers-reduced-motion:reduce){
 .type-mask-layer.is-assembling .type-photo-tile,
 .type-mask-layer.is-assembling .type-filler-tile{animation:none!important}
}


/* True photo-letter assembly: each card has its OWN final coordinate inside
   the actual glyph, rather than a full-image mask suddenly switching on. */
.type-mosaic-wrap .type-mask-layer{
 display:block!important;
 -webkit-mask-image:none!important;
 mask-image:none!important;
 overflow:hidden;
 contain:layout paint style;
 opacity:1!important;
}
.type-mosaic-wrap .type-photo-tile,
.type-mosaic-wrap .type-filler-tile{
 display:flex;position:absolute;
 left:0;top:0;
 min-width:0;min-height:0;
 transform:rotate(var(--tilt,0deg));
 border:1px solid #fffc;
 box-shadow:0 1px 3px #4150431a;
 border-radius:1px;
 contain:layout paint style;
 animation:none!important;
}
.type-mosaic-wrap .type-photo-tile img{width:100%;height:100%;object-fit:cover}
.type-mosaic-wrap .type-filler-tile strong{font-size:clamp(5px,.68vw,9px)}
.type-mosaic-wrap .type-filler-tile small{display:none}
.type-mosaic-wrap.has-mask .type-ghost-text{opacity:0}
.type-mask-layer.is-assembling .type-photo-tile,
.type-mask-layer.is-assembling .type-filler-tile{will-change:transform}
@media(max-width:850px){
 .type-mosaic-wrap .type-photo-tile,
 .type-mosaic-wrap .type-filler-tile{
  box-shadow:none;animation:none!important;filter:none;
 }
}


/* Independent photo cards genuinely fly to their text-derived target positions.
   A crisp original-artwork photo collage beneath them is introduced with a
   continuous 1.5s opacity crossfade, NEVER a last-frame mask pop. */
.type-mosaic-wrap .type-letter-matte{
 display:block;
 position:absolute;inset:0;
 width:100%;height:100%;
 object-fit:fill;
 z-index:1;pointer-events:none;
 opacity:0;
 transition:opacity 1.5s cubic-bezier(.38,0,.25,1);
 will-change:opacity;
}
.type-mosaic-wrap .type-letter-matte.is-visible{opacity:1}
.type-mosaic-wrap .type-mask-layer{
 z-index:2;
 transition:opacity .85s cubic-bezier(.42,0,.22,1);
 opacity:1;
}
.type-mosaic-wrap .type-mask-layer.is-fading{opacity:.08!important}
.type-mosaic-wrap .type-mask-layer.is-finished{opacity:0!important}
@media(prefers-reduced-motion:reduce){
 .type-mosaic-wrap .type-letter-matte,
 .type-mosaic-wrap .type-mask-layer{transition:none!important}
}