/*
 * Design 3.7 — publication pages: shelved collections of real work, picture-led
 * points and service details, and production steps beside a looping clip.
 */

/* Shared media: a photo, or a real artwork presented on its own blurred colours */
.tp37-media{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--tp3-ink)}
.tp37-media.is-photo .tp37-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform 1.4s var(--tp3-ease)}
.tp37-media.is-art::before{content:'';position:absolute;inset:-40px;background:var(--bg) center/cover no-repeat;filter:blur(26px) saturate(1.2) brightness(.55);transform:scale(1.1)}
.tp37-media.is-art::after{content:'';position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 30%,transparent,#0b232880)}
.tp37-media .tp37-art{position:absolute;z-index:1;left:50%;top:22px;max-width:84%;max-height:52%;width:auto;height:auto;border-radius:3px;box-shadow:0 30px 50px -20px #000d,0 0 0 1px #ffffff1f;transform:translateX(-50%) rotate(-2deg);transition:transform .9s var(--tp3-ease)}
.tp37-fan{position:absolute;z-index:1;left:50%;top:26px;width:80%;height:50%;transform:translateX(-50%)}
.tp37-fan-img{position:absolute;left:50%;top:50%;max-width:78%;max-height:92%;width:auto;height:auto;border-radius:3px;box-shadow:0 26px 40px -18px #000d,0 0 0 1px #ffffff1f;transform:translate(-50%,-50%) translateX(calc((var(--n) - 1) * 18%)) rotate(calc((var(--n) - 1) * 6deg));transition:transform .9s var(--tp3-ease)}
.tp37-fan-img:nth-child(2){z-index:2}
.tp37-tag{position:absolute;z-index:3;top:14px;right:14px;padding:6px 10px;border-radius:99px;background:#0b2328b8;backdrop-filter:blur(6px);color:#fff;font:700 .56rem/1 var(--tp3-sans);letter-spacing:.14em;text-transform:uppercase}
.tp37-tag.is-real{background:#e0b04ae6;color:#132f33}

/* 1. The collection: shelves of real work ------------------------------------------ */
.tp-editorial .tp37-collection{position:relative;background:linear-gradient(180deg,var(--tp3-cream),#efe8d6)}
.tp37-shelves{display:grid;gap:clamp(34px,4vw,56px);margin-top:clamp(26px,3vw,42px)}
.tp37-shelf{display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center}
.tp37-shelf-head{align-self:start;padding-top:12px}
.tp-editorial .tp37-kicker{margin:0 0 6px;font:700 .66rem/1.2 var(--tp3-sans);letter-spacing:.16em;text-transform:uppercase;color:#8a6a2c}
.tp-editorial .tp37-shelf-head h3{margin:0 0 8px;font:600 clamp(1.5rem,2vw,1.9rem)/1.1 var(--tp3-serif);color:var(--tp3-ink)}
.tp-editorial .tp37-shelf-head p:not(.tp37-kicker){margin:0;color:var(--tp3-muted);font-size:.95rem;line-height:1.6}
.tp37-scroll-hint{display:none;margin-top:12px;font:700 .64rem/1 var(--tp3-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tp3-teal-2)}
.tp37-scroll-hint i{display:inline-block;font-style:normal;animation:tp37-nudge 1.6s ease-in-out infinite}
@keyframes tp37-nudge{50%{transform:translateX(4px)}}
.tp37-shelf.is-scrollable .tp37-scroll-hint{display:block}
.tp37-row{position:relative;display:flex;align-items:flex-end;gap:20px;margin:0;padding:18px 6px 30px;list-style:none;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#c9bb98 transparent}
.tp37-row::after{content:'';position:sticky;right:0;flex:0 0 1px}
.tp37-shelf .tp37-row{background:linear-gradient(transparent calc(100% - 18px),#d8ccae calc(100% - 18px),#c7b893 calc(100% - 12px),transparent calc(100% - 12px))}
.tp37-row li{flex:0 0 auto;scroll-snap-align:start}
.tp-editorial a.tp37-item{display:flex;flex-direction:column;gap:10px;width:calc(210px * var(--ar,1));max-width:420px;min-width:150px;color:var(--tp3-ink);text-decoration:none}
.tp37-item-art{position:relative;display:block;height:210px;border-radius:3px;background:#fff;box-shadow:0 22px 34px -22px #0b2328,0 0 0 1px #0b232814;transform:rotate(calc((var(--n) - 1.5) * .6deg));transition:transform .6s var(--tp3-ease),box-shadow .6s}
.tp37-item-art img{display:block;width:100%;height:100%;object-fit:cover;border-radius:3px}
.tp37-zoom{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#0b2328cc;color:#fff;font-size:.9rem;opacity:0;transform:scale(.7);transition:opacity .3s,transform .4s var(--tp3-ease)}
.tp37-item:hover .tp37-item-art,.tp37-item:focus-visible .tp37-item-art{transform:translateY(-8px) rotate(0);box-shadow:0 34px 44px -24px #0b2328,0 0 0 1px #0b232814}
.tp37-item:hover .tp37-zoom,.tp37-item:focus-visible .tp37-zoom{opacity:1;transform:none}
.tp37-item-cap{max-width:100%;font:500 .82rem/1.35 var(--tp3-sans);color:#40595c}
.tp37-item-cap small{display:block;margin-bottom:2px;font:700 .6rem/1.2 var(--tp3-sans);letter-spacing:.12em;text-transform:uppercase;color:#8a6a2c}
.tp37-shelf.is-armed .tp37-row li{opacity:0;transform:translateY(24px)}
.tp37-shelf.is-in .tp37-row li{opacity:1;transform:none;transition:opacity .7s calc(var(--n) * 90ms),transform .9s calc(var(--n) * 90ms) var(--tp3-ease)}
@media(max-width:900px){
  .tp37-shelf{grid-template-columns:minmax(0,1fr);gap:8px}
  .tp37-item-art{height:170px}
  .tp-editorial a.tp37-item{width:calc(170px * var(--ar,1));max-width:320px;min-width:120px}
  .tp37-shelf .tp37-scroll-hint{display:block}
}

/* 2. Points: each drawn on what it describes ---------------------------------------- */
.tp37-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(24px,3vw,40px)}
.tp37-point{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:560px;overflow:hidden;border-radius:18px;color:#fff;box-shadow:0 40px 60px -44px #0b2328}
.tp37-point::after{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,transparent 30%,#0b2328cc 58%,#0b2328f7 100%);pointer-events:none}
.tp37-point-body{position:relative;z-index:2;padding:26px 26px 28px}
.tp37-no{display:block;margin-bottom:8px;font:600 2.4rem/1 var(--tp3-serif);color:transparent;-webkit-text-stroke:1px var(--tp3-gold-soft)}
.tp-editorial .tp37-point h3{margin:0 0 8px;font:600 clamp(1.6rem,2vw,1.95rem)/1.08 var(--tp3-serif);color:#fff}
.tp-editorial .tp37-point p{margin:0 0 14px;color:#e6e0d2;font-size:.96rem;line-height:1.6}
.tp37-point ul,.tp37-detail ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.tp37-point li{display:flex;align-items:flex-start;gap:9px;font:500 .88rem/1.4 var(--tp3-sans);color:#fff}
.tp37-point li::before{content:'';flex:0 0 16px;height:16px;margin-top:1px;border-radius:50%;background:var(--tp3-gold-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23132f33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.tp37-point:hover .tp37-art{transform:translateX(-50%) rotate(0) translateY(-6px)}
.tp37-point:hover .tp37-fan-img{transform:translate(-50%,-50%) translateX(calc((var(--n) - 1) * 26%)) rotate(calc((var(--n) - 1) * 9deg))}
.tp37-point:hover .tp37-bg{transform:scale(1.08)}
.tp37-points .tp37-media.is-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0b232840,transparent 30%)}
.tp37-points.is-armed .tp37-point{opacity:0;transform:translateY(30px)}
.tp37-points.is-in .tp37-point{opacity:1;transform:none;transition:opacity .8s calc(var(--i) * 120ms),transform 1s calc(var(--i) * 120ms) var(--tp3-ease)}
@media(max-width:1000px){.tp37-points{grid-template-columns:minmax(0,1fr)}.tp37-point{min-height:520px}}

/* 3. Service details: picture cards ----------------------------------------------- */
.tp-editorial .tp37-depth{background:#fffdf8}
.tp37-depth-head{margin-bottom:clamp(20px,2.4vw,32px)}
.tp-editorial .tp37-depth-lead{margin:6px 0 0;font:600 clamp(2rem,3.4vw,3rem)/1.05 var(--tp3-serif);color:var(--tp3-ink)}
.tp37-depth-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tp37-detail{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);min-height:300px;overflow:hidden;border:1px solid var(--tp3-line);border-radius:18px;background:#fff;box-shadow:0 30px 50px -44px #0b2328;transition:transform .6s var(--tp3-ease),box-shadow .6s}
.tp37-detail:hover{transform:translateY(-4px);box-shadow:0 40px 60px -42px #0b2328}
.tp37-detail>.tp37-media{position:relative;inset:auto;z-index:0;min-height:100%}
.tp37-detail .tp37-media .tp37-art{top:50%;max-height:78%;max-width:82%;transform:translate(-50%,-50%) rotate(-2deg)}
.tp37-detail:hover .tp37-media .tp37-art{transform:translate(-50%,-52%) rotate(0)}
.tp37-detail .tp37-fan{top:50%;height:70%;transform:translate(-50%,-50%)}
.tp37-detail .tp37-tag{top:12px;left:12px;right:auto}
.tp37-detail-body{display:flex;flex-direction:column;justify-content:center;padding:clamp(22px,2.4vw,32px)}
.tp37-detail .tp37-no{font-size:1.9rem;-webkit-text-stroke-color:var(--tp3-gold)}
.tp-editorial .tp37-detail h2{margin:0 0 10px;font:600 clamp(1.35rem,1.8vw,1.7rem)/1.12 var(--tp3-serif);color:var(--tp3-ink)}
.tp-editorial .tp37-detail p{margin:0 0 12px;color:var(--tp3-text);font-size:.96rem;line-height:1.65}
@media(max-width:1000px){.tp37-depth-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.tp37-detail{grid-template-columns:minmax(0,1fr)}.tp37-detail>.tp37-media{min-height:220px}}

/* 4. Production steps beside a looping clip --------------------------------------- */
.tp-editorial .tp37-flow{position:relative;overflow:hidden;color:var(--tp3-on-dark);background:radial-gradient(60% 60% at 80% 30%,#15434a 0%,transparent 70%),linear-gradient(180deg,#0b2328,#081b1f)}
.tp37-flow-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,4.4vw,72px);align-items:center}
.tp-editorial .tp37-flow .tp-eyebrow{color:var(--tp3-gold-soft)}
.tp-editorial .tp37-flow h2{margin:.25em 0 .35em;font:600 clamp(2.2rem,3.8vw,3.4rem)/1.04 var(--tp3-serif);color:#fff}
.tp-editorial .tp37-flow-intro{margin:0 0 22px;max-width:36em;color:var(--tp3-on-dark-muted);font-size:1.02rem;line-height:1.65}
.tp37-steps{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.tp-editorial .tp37-step button{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;width:100%;margin:0;padding:16px 18px;border:1px solid #ffffff1f;border-radius:14px;background:#ffffff08;color:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:background .3s,border-color .3s}
.tp-editorial .tp37-step.is-active button{background:#ffffff14;border-color:#e0b04a80}
.tp37-step-no{font:600 1.8rem/1 var(--tp3-serif);color:#9fb3b0}
.tp37-step.is-active .tp37-step-no{color:var(--tp3-gold-soft)}
.tp37-step-text strong{display:block;margin-bottom:4px;font:600 1.25rem/1.2 var(--tp3-serif);color:#fff}
.tp37-step-text span{display:block;font:400 .92rem/1.55 var(--tp3-sans);color:var(--tp3-on-dark-muted)}
.tp37-step-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--tp3-cyan),var(--tp3-magenta),var(--tp3-gold-soft))}
.tp37-flow.is-playing .tp37-step.is-active .tp37-step-bar{animation:tp37-fill 4.2s linear forwards}
@keyframes tp37-fill{to{transform:scaleX(1)}}
.tp37-film{position:relative;margin:0;aspect-ratio:16/10.5;overflow:hidden;border-radius:20px;background:#0e2e34;box-shadow:0 50px 90px -50px #000}
.tp37-film.is-portrait{aspect-ratio:4/4.3}
.tp37-clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tp37-film::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0b232833,transparent 30%,transparent 62%,#0b2328cc);pointer-events:none}
.tp37-film .tp37-tag{top:16px;left:16px;right:auto}
.tp37-film figcaption{position:absolute;z-index:2;left:18px;right:18px;bottom:16px;color:#fff;font:600 1.15rem/1.3 var(--tp3-serif);transition:opacity .4s}
.tp37-film figcaption b{display:block;margin-bottom:3px;font:700 .62rem/1 var(--tp3-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--tp3-gold-soft)}
.tp37-brief{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) auto;gap:clamp(18px,3vw,40px);align-items:center;margin-top:clamp(30px,3.4vw,48px);padding:clamp(22px,2.4vw,30px);border:1px solid #ffffff1f;border-radius:18px;background:#ffffff0a}
.tp-editorial .tp37-brief h3{margin:4px 0 6px;font:600 1.5rem/1.1 var(--tp3-serif);color:#fff}
.tp-editorial .tp37-brief p{margin:0;color:var(--tp3-on-dark-muted);font-size:.92rem;line-height:1.55}
.tp37-brief ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tp37-brief li{padding:7px 12px;border:1px solid #ffffff26;border-radius:99px;font:500 .82rem/1.3 var(--tp3-sans);color:#fff}
.tp37-brief-cta{display:grid;gap:10px;justify-items:start;max-width:230px}
.tp-editorial .tp37-brief-cta p{font-size:.82rem}
@media(max-width:1000px){.tp37-flow-grid{grid-template-columns:minmax(0,1fr)}.tp37-brief{grid-template-columns:minmax(0,1fr)}.tp37-brief-cta{max-width:none}}

/* Inclusions: chips instead of a plain list (existing markup) */
.tp37-points~.tp-service-inclusions{margin-top:24px}

@media(prefers-reduced-motion:reduce){
  .tp37-shelf.is-armed .tp37-row li,.tp37-points.is-armed .tp37-point{opacity:1;transform:none}
  .tp37-item-art,.tp37-art,.tp37-fan-img,.tp37-bg,.tp37-detail,.tp37-shelf.is-in .tp37-row li,.tp37-points.is-in .tp37-point{transition:none!important}
  .tp37-scroll-hint i,.tp37-flow.is-playing .tp37-step.is-active .tp37-step-bar{animation:none}
}